Simple jQuery Form Validation Example
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Anjali
In this article we will show you the solution of simple jQuery form validation example, here we needs to use external open source jquery validation cdn link for validate forms with the help of validate method.
This links provides access to sets rules and message for form input elements which is done by specifying name attribute value with required properties and values. So we can validate each fields easily.
Step By Step Guide On Simple jQuery Form Validation Example :-
Here we defined html block with form then within form we defined two input elements for collects user name and email 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 input elements.
So we defined first input element’s name attribute value ‘name’ and here we sets required attribute value to ‘true’, ‘minlength’ sets to ‘3’.
Likewise we done it for email input element then we defined message which is used for throws defined error message.
<!DOCTYPE html>
<html>
<head>
<title>Simple Form Validation</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:{
name:{
required:true,
minlength:3
},
email:{
required:true,
email:true
}
},
messages:{
name:{
minlength:"Name should be at least 3 characters"
},
email:{
email:"Email should be in the format: abc@domain.tld"
}
}
})
})
</script>
</head>
<body>
<form method="post" id="frm">
<input type="text" name="name" id="inp" placeholder="Enter Name">
<input type="text" name="email" id="em" placeholder="Email">
<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 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 ‘name’ which refers name input field, there we sets ‘required’ attribute value to ‘true’ and ‘minlength’ attribute value to ‘3’.
- Likewise we specified ‘email’ which refers email input field, there we sets ‘required’ attribute value to ‘true’ and ‘email’ attribute value to ‘true’.
- Second we defined ‘messages’ within this we again specified ‘name’ there we sets ‘minlength’ value of error message to ‘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’.
- In html block we defined form with id ‘frm’ within form we defined two input elements name and email id, 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 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 name, email 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 simple jQuery form validation example helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
