cameras in the cloud.

IP camera reviews, news and tips, along with the latest news in home and business video monitoring
05
Dec

jQuery Form Validation Tutorial

Posted by on in Web Development

There are lots of ways to perform validation on your html forms but nothing is easier than using jQuery’s validation plug-in. I’ll take you through a small tutorial to help you understand how to make it work. Let’s take a look at what you can do and how you can customize the built in validation.

Of course as always make sure you reference the main site here along with all the available validation methods found here. There are also a few good tutorials like this one and especially this one, but I wanted to take the layman's approach right from the beginning. Let’s go into details of what is needed using a simple HTML form example. 

As part of this tutorial I'll take you through these items:

  1. Use HTML and CSS for jQuery validation
  2. Use jQuery to define your own validation rules
  3. Define more rules with custom messages
  4. Create your own custom jQuery validation method


First let's start with the very simplest form using HTML/CSS:

<head>
<meta charset="utf-8" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
   $( "#mytestform" ).validate();
});
</script>
</head>
<body>
<form id="mytestform" name="" method="get"  action="">
                  <p>
                   <label for="aname">Name:&nbsp;</label>
                  <input name="aname" class="required" minlength=”4” size="20" />
                   </p>
                   <p>
                  <label for="food">Do you like Italian food:&nbsp;</label>
                  <select id="italianstatus" name="italian_food">
                          <option value="yes" selected="selected">Hell Yes!</option>
                          <option value="no">Makes me wanna puke</option>
                          <option value="sometimes">Just on Monday</option>
                  </select>
                  <input class="submit" type="submit" value="Submit"/>
                   </p>
   </form>

</body>

The key here is the the input field for the name has “minlength” and “required”. This will either trigger an empty name or give you the message if the length of characters is smaller than 4.

jQuery input field

It is easy as that. One line of jQuery code. For more details on the attributes you can use see Raymond’s blog. First thing that jumps out is that the styling is butt ugly. Just add a little color and positioning and you are set.

<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>


jQuery input field-1

Okay but how about defining those rules in jQuery for more customization? Simple, add to your validation routine and remove the “minlength”/”required” attributes from the HTML:

<head>
<meta charset="utf-8" />
<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
   $( "#mytestform" ).validate({
           rules: {
                   aname: "required"
           }
   });
});
</script>
</head>
<body>
<form id="mytestform" name="" method="get"  action="">
                  <p>
                   <label for="aname">Name:&nbsp;</label>
                  <input name="aname" size="20" />
                   </p>
                   <p>
                  <label for="food">Do you like Italian food:&nbsp;</label>
                  <select id="italianstatus" name="italian_food">
                          <option value="yes" selected="selected">Hell Yes!</option>
                          <option value="no">Makes me wanna puke</option>
                          <option value="sometimes">Just on Monday</option>
                  </select>
                  <input class="submit" type="submit" value="Submit"/>
                   </p>
   </form>

</body>


Let’s keep on building on this. Let’s add a bunch of new criteria such as minimum/maximum length and even custom messages. Nothing changes with the HTML or libraries so here is the changes to the jQuery code:

<script>
$(function() {
   $( "#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   }
           },
           messages: {
                   aname: {
                           required: "Dude, enter a name",
                           minlength: $.format("Keep typing, at least {0} characters required!"),
                           maxlength: $.format("Whoa! Maximum {0} characters allowed!")
                   }
           }
   });
});
</script>


You can see that I’ve added a few more criteria along with the custom messages. I’ve tied it all to the name in the form “aname”. For the other fields in your form just add to this depending on the name. I’ve also introduced the format method in the message. This lets us replace the argument given for minlength and maxlength. Handy to know that we don’t have to worry about hard-coding that value if they ever change.

To finish it up, lets add a custom validation routine. Again easy with the plugin. This is where the plugin’s addMethod comes into play.

<script>
$(function() {
   $( "#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20,
                           customvalidation: true
                   }
           },
           messages: {
                   aname: {
                           required: "Dude, enter a name",
                           minlength: $.format("Keep typing, at least {0} characters required!"),
                           maxlength: $.format("Whoa! Maximum {0} characters allowed!")
                   }
           }
   });
   $.validator.addMethod("customvalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Sorry, no special characters allowed"
   );
});
</script>


This is a regex example to test for special characters. Here I’m allowing some special characters but others I’m not. So if you enter “*” or “!” for example, you will get the message. Pretty cool huh?

These are the steps I went through to understand this plugin. I’m certainly not an expert (far from it) so comments are most welcome. I hope this can help you on your way.

Entrepreneur and Camcloud founder. I'm a 12+ year tech veteran. Former Director of Product Management and Certified Scrum Product Owner (CSPO). I focus on front-end web development with jQuery, HTML5 & cloud infrastructure.


Find me on Twitter

Comments

  • Guest
    Brandon Monday, 13 April 2015

    Great tutorial. Just what I was looking for.

    Thank you

  • Guest
    renjnary Wednesday, 19 November 2014

    good tut..first one that helped me get a hang of the validation plugin..thanks:)

  • Guest
    Andrea Friday, 07 November 2014

    This is exactly what I need to get me started. I read the documentation and a few examples... liked the actions validation did but from the documentation I did not know how to start looking at the code for the examples. After going thru your tutorial and doing each step one at a time, I believe I can look at the other example that meets my needs and understand it.

    Thank you!

  • Guest
    balu pawar Wednesday, 06 August 2014

    thanks....its grate

  • Guest
    francesco Tuesday, 05 August 2014

    hi, and with dynamically add and remove fields?

  • Guest
    Claire Monday, 23 June 2014

    Thanks so much!

    It means a lot when people post easy to follow tutorials,
    and it is more valuable than gold to noobs such as myself.

  • Guest
    pinky Friday, 16 May 2014

    readable and understandable

  • Guest
    grails Sunday, 04 May 2014

    thanks for the tutorial. I hope there is a way to make the JS more concise

  • Guest
    Yammy Sunday, 27 April 2014

    Excellent tut! :D

  • Guest
    klf1ad1 Wednesday, 16 April 2014

    best explaination

  • Guest
    Chris Wednesday, 26 March 2014

    Appreciate the tutorial. An excellent introduction!

  • Guest
    Binh Thanh Nguyen Thursday, 06 March 2014

    Thanks, nice post

  • Guest
    guest Wednesday, 26 February 2014

    Very useful!

  • Guest
    Patrick Sunday, 26 January 2014

    Hi ,
    This is a great tutorial; some demos for example would have been awesome!

    Check our instant edit n preview system for form validator plugin -

    http://bitconfig.com/form-validator/bitconfig_form_validator.html

    Cheers
    -Patrick

  • Guest
    jeffi Sunday, 19 January 2014

    useful tutorial

  • Guest
    neven Tuesday, 14 January 2014

    helpful tutorial , but
    i need to add isNaN and
    apply the message to different fields
    could you help me ??

  • Guest
    PAKKI SAMEERA Thursday, 09 January 2014

    A very Useful tutorial for starters like me.Can you please help me out with providing validations for datepickers and placeholders

    Thankyou

  • Guest
    JackMan Friday, 03 January 2014

    Amazing tutorial, Thanks a ton
    :D

  • Guest
    ayşe Wednesday, 20 November 2013

    Thank u so muchhh !! greetings from Turkey :)

  • Guest
    chris Friday, 15 November 2013

    very nice, didn't know to do this before, ok, how about this one then, how about successful validation, putting for example a tick when the user has done it correct

Leave your comment

Guest
Guest Saturday, 01 August 2015
Security

We take your security and privacy seriously. Be sure to select a strong password for your account. Read our privacy policy for more information. 
Contact

1-855-519-1530
sales@camcloud.com
support@camcloud.com