Live Validation of Form Fields Using jQuery– Validate as you type

Validating any web form is really important to collect correct data. Now validation can be done in many ways most of the time people go with server side validation. But just assume how irritating it would be for your visitors when they fill up the entire form and after submitting they get response from server about “Invalid Field” or something like that. So Client side validation can solve this problem but again what’s the benefit if all the fields are validated once form’s “submit” button is clicked? It would be best if all the fields are validated individually i.e. validate as users type. Yeah it’s good to alert them at the same moment when they fill any field incorrectly.

live validation jquery InfoTuts

DOWNLOAD   LIVE DEMO

In this post we will create a simple contact form with live field validation. So we will develop a contact form in HTML and CSS and then we will use some jQuery code to do our simple task.

Here’s our HTML Markup:

</p>
<body>
<div id="header">
<h1>Live Form Field Validation Using jQuery- Validate as you type</h1>
</div>

<form action="#" method="post" id="myform">

<fieldset>
 <legend>Contact Form </legend>

<p>We would love to hear from you. Please fill out this form</p>
 <div class="elements">
 <label for="name">Name :</label>
 <input type="text" id="fname" name="fname" size="35" />
 </div>
 <div class="elements">
 <label for="name">Email :</label>
 <input type="text" id="email" name="e-mail" size="35" />
 </div>
<div class="elements">
 <label for="message">Message</label>
 <textarea rows="5" cols="28" id="msg" name="msg" /></textarea>
 </div>
<div class="submit">
<input type="submit" id="submit" class="btn" value="Login" />
 </div>
 </fieldset>
</form>
<p style="text-align: justify;">

And our jQuery Code:

</p>
$(document).ready(function(){
$('#message').hide();

$('#myform input[type=text], #myform textarea').each(function(){
 $(this).after('<span class="validation"></span>');
 });



 $('#fname').focusout(function() {
 if (!$(this).val())
 $(this).parent().find('span').removeClass('valid').addClass('error').focus();

 else
 $(this).parent().find('span').removeClass('error').addClass('valid');
 });

 $('#email').focusout(function() {
 if (!$(this).val() || !isEmail($(this).val()))
 $(this).parent().find('span').removeClass('valid').addClass('error').focus();
 else
 $(this).parent().find('span').removeClass('error').addClass('valid');
 });

 $('#msg').focusout(function() {
 if (!$(this).val() )
 $(this).parent().find('span').removeClass('valid').addClass('error').focus();
 else
 $(this).parent().find('span').removeClass('error').addClass('valid');
 });



 $('#submit').click(function() {

 $('#fname').trigger("focusout");

 $('#email').trigger("focusout");
 $('#msg').trigger("focusout");

 if ($('#myform span.error').size()>0) {

 $('span.error:first').parent().find('input, textarea').focus();

return false;
 }
 else{
 alert ("Thanks All fields Were Entered Correctly");}
 });


 function isEmail(emailid) {

var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

return pattern.test(emailid);
 }

});
<p style="text-align: justify;">

Note: There are various good jQuery plugins for live validating input fields but I am not using them because I wanted to do it in plain jQuery. I have also not used HTML5 input types because I wanted to handle everything with jQuery to make it work on every browser.

In the same way, you can validate any form field. If it needs validation for a particular pattern (password, email, phone number etc) then add regular expression for that. Just Google it and you will get regular expressions for all form field types. Please share this post with your friends and followers.