Validate forms in client side using jQuery

24Feb 2012 by Ruben Canton

There is a quick way for validating forms if you are using jQuery.

1. Download the validation plugin

You need to download the jQuery Validate plugin. Alternatively you can make a call to the online version from your code.

2. Add the plugin to your website

I presume you are yet using the latest jQuery library and you don’t need any explanation on how to use it, then, just add another reference to the plugin in your code so you can use it:

    <script src='Scripts/jquery.-1.7.1.min.js' type='text/javascript'></script>
    <script src='Scripts/jquery.validate.min.js' type='text/javascript'></script>

3. Make a call to validation

Now, if you just want to validate a form using default validation you only need to make a call to this function:

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('form').validate();
    });
</script>

You can of course have more forms and select the one you want to validate etc. But lets simplify it for this example. Now, the form will be validated but since the rules are not set jQuery will not know what to validate.

4. Adding rules to validation

To add rules you only need to add style classes to the class atribute like this:

Name <input class="required" type="text" > <br />
Website <input class="required url" type="text" > <br />
Phone <input class="number" type="text" > <br />
Email <input class="required email" type="text" > <br />

As you can see, Ive add some classes and just doing that the form will be validated and the input fields be checked with the conditions Ive added through the classes. You can add multiple conditions to make a field required and number, for example.

Here is a list of some of the class styles you can use:

  • required
  • email
  • number (decimal)
  • digits (integer)
  • date
  • dateISO
  • url
  • creditcard

You can also add some properties like minlength, maxlength or range:

Name <input class="required" type="text" minlength="2"> <br />
Website <input class="required url" type="text" maxlength="80"> <br />
Phone <input class="number" type="text" range="600"> <br />
Email <input class="required email" type="text" > <br />

And that will help where adding classes wouldn’t work (you need to set a value). A list of them:

  • minlength
  • maxlength
  • rangelength
  • min
  • max
  • range
  • accept (file extensions)

5. Customizing validation

But despite thats so useful, quick and flexible you may need more specific conditions or just want to add your own error messages. For doing so its still very easy when you make the call to the validate function, just adding custom values:

    $('form').validate({
        rules: {
            txtName: required,
            website: {required: true, minlength: 5},
            phone: {required:true,
                    digits: true,
                    rangelength: [6, 9]
            },
            email {required: true}
        }, messages: {
            txtName: required : 'The name is required',
            txtSurname: { required: 'The website is required', 
                          minlength: 'The website need to be at least 5 characters length'}
            phone { rangelength: 'The phone needs to be between 6 and 9 characters' }
        }
    });

You can add individual conditions without brakets like in name, or add more conditions using brackets. To make them match the fields you have to add the name property to them:

Name    <input name="name" class="required" type="text" minlength="2"> <br />
Website <input name="website" class="required url" type="text" maxlength="80"> <br />
Phone   <input name="phone" class="number" type="text" range="600"> <br />
Email    <input name="email" class="required email" type="text" > <br />

6. Customizing messages style

Error messages will show a label like this one:

<label class="error" for="txtName" generated="true"></label>

You can add a style in your stylespage or in the same page to change its look and make it fit your page better. Notice you can use the class .error, but also the property generated=”true” or the property “for” so that you can specify more properly in your css:

.error{} /*general error messages*/
.error[generated=true] {} /*generated error msgs when jQuery validates */
.error[for=txtName]{} /*very custom style for error msg when txtName is not correct*/

You can check more options, methods, etc. at its documentation page.

Close Bitnami banner
Bitnami