By 05/04/2016

Html Form Validation In JQuery

  • Html Form validation is an essential part in a web development specially when you are developing a website which lets users to register their information through an online form.
  • Web masters must use validations before process a form to the server.
  • You can achieve the validation easily using JQuery.
  • This validation is called client side validation because JQuery validation is interpreted in a web browser rather than server.

Example:

<!Doctype html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Html Form Validation In JQuery</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <Script>
 function isValidate(){
 redirect = true;
 
 var user_name = $("#user_name").val();
 var user_contact = $("#user_contact").val();
 if(user_name == "") {
 document.getElementById("name_error").innerHTML = "Name is required !<br>";
 redirect = false;
 }
 
 if(user_contact == "") {
 document.getElementById("contact_error").innerHTML = "Contact is required !<br>";
 redirect = false;
 }
 
 if(user_name != "" && user_contact != "") {
 document.getElementById("name_error").innerHTML = "";
 document.getElementById("contact_error").innerHTML="";
 
 alert("Form is validated");
 redirect = true;
 }
 return redirect;
 }
 </script>
 
 <style>
 span { color:red; }
 </style>
 </head>
 
 <body>
 <form method="post" action="" onsubmit="return isValidate()">
 
 <span id="name_error"></span>
 <input type = "text" name="user_name" id = "user_name" placeholder="Enter name"><br><br>
 
 <span id="contact_error"></span>
 <input type = "text" name="user_contact" id = "user_contact" placeholder="Contact"><br><br>
 
 <button type = "submit"> Submit </button>
 </form>
 </body>
 </html>






Posted in: HTML, jQuery, Solutions

Comments are closed.

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .