Validation In jQuery For Registration Form
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of validation in jQuery for registration form, here we needs to use external open source jquery validation cdn link for validate forms with the help of validate method and on() method in jquery.
This links provides access to sets rules and message for form input elements which is done by specifying name attribute value with required properties, values then using on() method we can validate name formats.
Step By Step Guide On Validation In jQuery For Registration Form :-
Here we defined html block with registration form which contains four input elements for collects user first name, last name, email and password then at last defined submit button.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we defined validate() method with form element by id ‘frm’.
Then within validate method we defined rules which will creates rule for form’s input elements.
So we defined first input element’s name attribute value ‘fname’ there we sets required attribute value to ‘true’, ‘minlength’ sets to ‘3’.
Likewise we done it for remaining three input elements then we defined message which is used for throws defined error message.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function (){
$("#frm").validate({
rules:{
fname:{
required:true,
minlength:3
},
lname: "required",
email:{
required:true,
email:true
},
pswd:{
required: true,
minlength: 5
}
},
messages:{
fname:{
minlength:"First name should be at least 3 characters"
},
email:{
email:"Email should be in the format: abc@domain.tld"
},
pswd:{
minlength:"Password should be at least 5 characters"
}
},
});
$('#fn').on('input',function(){
var fnm=$(this).val();
var vn= /^[a-zA-Z]*$/;
if(!vn.test(fnm)) $('#msg1').text("Only characters allowed");
else $('#msg1').empty();
})
$('#ln').on('input',function(){
var lnm=$(this).val();
var vn= /^[a-zA-Z]*$/;
if(!vn.test(lnm)) $('#msg2').text("Only characters allowed");
else $('#msg2').empty();
})
});
</script>
</head>
<body>
<style>
input{
margin: 5px 10px;
}
</style>
<h2>Registration Form</h2>
<form method="post" id="frm">
<input type="text" name="fname" id="fn" placeholder="Enter First Name"><span id="msg1"></span><br>
<input type="text" name="lname" id="ln" placeholder="Enter Last Name"><span id="msg2"></span><br>
<input type="text" name="email" id="em" placeholder="Enter Email"><br>
<input type="text" name="pswd" id="p" placeholder="Enter Password"><br>
<input type="submit" id="sub" value="Submit">
</form>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery, jquery validate library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we defined validate() method which is appends with form element id ‘frm’ so which is used for assign some rules and message for form elements.
- First we defined ‘rules’ within this we specified ‘fname’ which refers first name input field, there we sets ‘required’ attribute value to ‘true’ and ‘minlength’ attribute value to ‘3’.
- Then we specified ‘lname’ which refers last name input field, there we sets ‘required’ attribute value to ‘true’ and specified ‘email’ which refers email input field, there we sets ‘required’ attribute value to ‘true’ and ‘email’ attribute value to ‘true’.
- Lastly we specified ‘pswd’ which refers password input field, there we sets ‘required’ attribute value to ‘true’ and and ‘minlength’ attribute value to ‘5’.
- Second we defined ‘messages’ within this we again specified ‘fname’ there we sets ‘minlength’ value of error message to ‘First name should be at least 3 characters’.
- Then specified ‘email’ there we sets ‘email’ value of error message to ‘Email should be in the format: abc@domain.tld’ and specified ‘pswd’ there we sets ‘email’ value of error message to ‘Password should be at least 5 characters’.
- For checks first, last names format we defined on() method with elements id’s ‘fn,ln’ separately there we storing pattern on variable ‘vn’ then we comparing user inputs with pattern by using test() method.
- If it returns true then it throws error message ‘Only characters allowed’ otherwise leave span elements of ‘msg1,msg2’ as empty by empty() method.
- In html block we defined form with id ‘frm’ within form we defined four input elements first name, last name, email id and password then submit type button for submits user response.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate registration form input fields using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see heading ‘Registration Form’ then first name, last name, email and password input fields and submit button, now user needs to fill input elements then clicks on submit button.
If user filled with wrong input then respective error message will displayed.
I hope this article on validation in jQuery for registration form helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
