jquery registration form validation; Through this tutorial, i am going to show you how to validate form before submit using jquery validator.
Registration Form Validation using jQuery
- Create html form
- Include jQuery cdn in form
- Implement validation rules
Create html form
Create one html file and then inside this file; create some fields like firstname, lastname, email, password; as shown below:
<!DOCTYPE html>
<html>
<head>
<style>
label,
input,
button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
.common_box_body {
padding: 15px;
border: 12px solid #28BAA2;
border-color: #28BAA2;
border-radius: 15px;
margin-top: 10px;
background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
<h2>Registration</h2>
<form action="#" name="registration" id="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"><br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]"><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder=""><br>
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
</body>
</html>
Include jQuery cdn in form
Include jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin you need to include cdn library of jQuery validation plugin.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>Implement validation rules
Implement some validation rules in script tag for validating a form data before send or submit to the server. As shown below:
<script>
$(document).ready(function(){
$("#registration").validate({
// Specify validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
}
},
});
});
</script>
Your Registration form will look like with jquery validation
Registration
Recommended jQuery Tutorials
Recommended:-jQuery Clone/Duplicate Html Elements
Recommended:-jQuery Wrap and Unwrap Multiple Html Element
Recommended:-jQuery Ajax Get Method with Example
Recommended:-jQuery Filter Selection of HTML Elements
Recommended:-jQuery Find Sibling with id, Class
Recommended:-jQuery scrollTop Method
Recommended:-jQuery Load External Html Content from Another Page
Recommended:-jQuery Ajax Post Example
Recommended:-jQuery Get/Find Closets Element
Recommended:-jQuery Check Uncheck Checkbox
Recommended:-jQuery Previous Next Sibling Methods
Recommended:-jQuery setInterval and setTimeout