Simple Form validation jQuery snippet

There are plenty of powerful jQuery validation plugins out there to meet your needs, but sometimes your requirement is so little that you just don’t bother including these plugins into your page, you might just create your own simple validation for your Form. So here’s a simple jQuery validation script you can include in your form page and have almost powerful validation.

Let’s say you have similar HTML form as below, which needs validation.

1
2
3
4
5
6
<form action="" method="post" id="my_form" novalidate>
<label><span>Name : </span><input type="text" name="name" required="true" /></label>
<label><span>Email : </span><input type="email" name="email" required="true"  /></label>
<label><span>Message : </span><textarea name="message" required="true" ></textarea></label>
<label><input type="submit" value="Submit Form"></label>
</form>

Here’s simple jQuery validation script, which will loop though each Form field that has required=”true” attribute and validate them. If field is empty or email is incorrect, it will simply change field border color to red, and when user types again the color will change back to normal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
$(document).ready( function()

    {//simple validation at client's end
    $( "#my_form" ).submit(function( event ){ //on form submit      
        var proceed = true;
        //loop through each field and we simply change border color to red for invalid fields      
        $("#my_form input[required=true], #my_form textarea[required=true]").each(function(){
                $(this).css('border-color','');
                if(!$.trim($(this).val())){ //if this field is empty
                    $(this).css('border-color','red'); //change border color to red  
                   proceed = false; //set do not proceed flag
                }
                //check invalid email
                var email_reg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/;
                if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                    $(this).css('border-color','red'); //change border color to red  
                    proceed = false; //set do not proceed flag            
                }  
        });
       
        if(proceed){ //if form is valid submit form
            return true;
        }
        event.preventDefault();
    });
   
     //reset previously set border colors and hide all message on .keyup()
    $("#my_form input[required=true], #my_form textarea[required=true]").keyup(function() {
        $(this).css('border-color','');
        $("#result").slideUp();
    });

});
</script>

Demo

Here’s the demo of simple jQuery validation script.





1 Comment Add Comment

  • I used jquery a long time but i can’t created any plugin with jquery. I think this will the best base for me later. Tks

     Reply