Click here to Skip to main content
11,495,524 members (66,943 online)
Click here to Skip to main content

jQuery Validation Styles

, 24 Jun 2012 CPOL 56.1K 4.6K 39
Rate this:
Please Sign up or sign in to vote.
This application will allows user to show validation messages in three elegant ways like Inline, Summary and Popup.

Introduction 

This application makes simple client side form validation with the help of jQuery plugins. Here I would like to show different validation style of jQuery with basic sample of HTML and jQuery.


I have published article at http://saffroze.com/jquery-validation-styles/

Background  

ASP.NET MVC 3 uses jQuery validation for form validations and jQuery validation library has a remote validation feature, using this feature by ASP.NET MVC libraries is really easy you can find more about it http://docs.jquery.com/Plugins/validation.

  • Every validation attribute has a ToJson method which serializes attributes into a dictionary
    $("#form").validate({
     
    rules: {
     
    firstname: { required: true, minlength: 5, maxlength: 10 },
     
    lastname: { required: true, minlength: 5, maxlength: 10 },
     
    email: { required: true, email: true },
     
    mobile: { required: true, digits: true, minlength: 10, maxlength: 10 }
     
    }
     
    });
  • All error labels are displayed inside an unordered list with the ID “validationSummary” Additonal container for error messages. The elements given as the “errorContainer” are all shown and hidden when errors occur.
    errorContainer: "#validationSummary"
  • The error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list.
    errorLabelContainer: "#validationSummary ul"
  • Therefore the error labels are also wrapped into li elements (wrapper option).
    wrapper: “li”
  • A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object.
    showErrors: function (errorMap, errorList) {
    .
    .
    .
    } 

Implementation 

    This code demonstrates a basic jQuery validation sample, jQuery Validate plugins validates the form before it submitted, if form is valid it submits the form, otherwise form doesn’t get submitted.

  1. Include jQuery Plugin and Validations scripts into your page.

    <script type="text/javascript" src="../../Scripts/jquery.validate.js">&lt;/script>
    
        &lt;script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.js">&lt;/script> 
  2. Add following script in your page. It is very descriptive so no need to explain each and every lines.
        $(document).ready(function () {
            //Set border color when text class getting focus or remove border color when lost focus from textbox.
            $('.text')
            .focus(function () { $('.text').removeClass('focused'); $(this).addClass('focused'); })
            .blur(function () { $(this).removeClass('focused'); });
     
            //Fire validation events
            $("#form").validate({
     
                //Setting validation type like, Required, Minimum or Maximum Length, Data Type etc.
                rules: {
                    firstname: { required: true, minlength: 5, maxlength: 10 },
                    lastname: { required: true, minlength: 5, maxlength: 10 },
                    email: { required: true, email: true },
                    mobile: { required: true, digits: true, minlength: 10, maxlength: 10 }
                },
     
                //All error labels are displayed inside an unordered list with the ID "validationSummary"
                //Additonal container for error messages. The elements given as the "errorContainer" are all shown and hidden when errors occur.
                errorContainer: "#validationSummary",
     
                //But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list.
                errorLabelContainer: "#validationSummary ul",
     
                //Therefore the error labels are also wrapped into li elements (wrapper option).
                wrapper: "li",
     
                //A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, 
                //called in the context of the validator object.
                showErrors: function (errorMap, errorList) {
                    $('.errorList').hide();
                    $('.inlineMessage').hide();
                    $('#validationSummary').hide();
                    var messages = "";
                    $.each(errorList, function (index, value) {
                        var id = $(value.element).attr('id');
                        messages += "<span>" + (index + 1) + ". <a title='click to view field' href='javascript:setFocus(" + id + ");'>[" + $(value.element).attr('name') + "]</a> " + value.message + "</span>
    ";
                    });
                    messages = "
     
     
    <div class='errorWrapper'>
     
     
    <h1>Please correct following errors:</h1>
     
    " + messages + "</div>
     
    ";
                    switch ($('input[name=DisplayType]:checked', '#form').val()) {
                        case "Popup":
     
                            //Showing validation summary in Popup window
                            $('#dialog-validation').html(messages);
                            $('#dialog-validation').dialog('open');
                            break;
                        case "Summary List":
     
                            //Showing validation summary in list of the same page
                            $('#summary-validation').html(messages);
                            $('#summary-validation').show("fast");
                            break;
                        case "Inline":
     
                            //Showing validation in inline format
                            $.each(errorList, function (index, item) {
                                $(item.element).next('div').html("<span style='font-weight:bold'>[" + $(item.element).attr('name') + "]</span> " + item.message);
                                $(item.element).next('div').show("fast");
                            });
                            break;
                    }
                },
     
                //If all validations are successfully validate then execute submitHandler function
                submitHandler: function () {
                    $('#summary-validation').empty();
                    $('#dialog-validation').empty();
                    alert("All fields are valid!")
                }
            })
     
            //jQuery Modal Dialog boxes can also use to display list of validation erorrs.
            $("#dialog-validation").dialog({
                resizable: false,
                height: 190,
                width: 350,
                modal: true,
                autoOpen: false,
                title: "Validation Errors",
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                        $('.focused').focus();
                    }
                }
            });
        });
     
        //If validation errors are occured in any field, it will display field name with link, clicking on link it will set focus of perticular field.
        function setFocus(ele) {
            $(ele).focus();
        }
    
  3. HTML page:
    1.  If you need show validation near to field then it should be compulsory to add “” with class name is “inlineMessage”.
      <div class="formWrapper" id="formStyle"><form id="form" action="" method="post" name="form"><label>First Name</label> <input id="firstname" class="text" type="text" name="firstname" />
      <div class="inlineMessage"></div> </form>
      </div>
    2. Hidden container for Error Messages
      <div id="validationSummary">
             	<ul class="errorMessageList">
      	       </ul>
          	</div>
      
    3. Display Validation Summary in same page
      <div style="display: none;" id="summary-validation" class="errorList">
      	    </div>
      
    4. Display Validation Summary in Modal Dialog box.
      <div style="display: none;" id="dialog-validation" class="errorList">
        </div>
      
    5. Add Style for Form, Inputbox, Button, Dialog and Validation Messages.Please visit Views/Shared/_Layout.cshtml

Your Thoughts

If you find some issues or bugs with it, just leave a comment or drop me an email. If you make any notes on this, let me know that too so I don’t have to redo any of your hard work. Please provide a “Vote” if this would be helpful.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sunasara Imdadhusen
Software Developer (Senior) Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen

AWARDS:
  1. 2nd Best Mobile Article of January 2015
  2. 3rd Best Web Dev Article of May 2014
  3. 2nd Best Asp.Net article of MAY 2011
  4. 1st Best Asp.Net article of SEP 2010

Read More Articles...
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun14-May-14 2:04
memberHumayun Kabir Mamun14-May-14 2:04 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen29-May-14 2:13
professionalSunasara Imdadhusen29-May-14 2:13 
QuestionLink is not working provided in this article Pin
Asutosha1-May-14 9:08
memberAsutosha1-May-14 9:08 
AnswerRe: Link is not working provided in this article Pin
Sunasara Imdadhusen29-May-14 2:14
professionalSunasara Imdadhusen29-May-14 2:14 
Questionhow to validate for duplication Pin
GorPedoC15-May-13 20:03
memberGorPedoC15-May-13 20:03 
AnswerRe: how to validate for duplication Pin
Sunasara Imdadhusen15-May-13 20:17
professionalSunasara Imdadhusen15-May-13 20:17 
GeneralRe: how to validate for duplication Pin
GorPedoC20-May-13 2:02
memberGorPedoC20-May-13 2:02 
GeneralRe: how to validate for duplication Pin
Sunasara Imdadhusen22-Apr-14 3:28
professionalSunasara Imdadhusen22-Apr-14 3:28 
QuestionjQuery Validation Styles Pin
Ashish Rathod2-Nov-12 20:08
memberAshish Rathod2-Nov-12 20:08 
AnswerRe: jQuery Validation Styles Pin
Sunasara Imdadhusen22-Apr-14 3:28
professionalSunasara Imdadhusen22-Apr-14 3:28 
GeneralMy vote of 5 Pin
Olivier Giulieri15-Oct-12 21:54
memberOlivier Giulieri15-Oct-12 21:54 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen15-Oct-12 22:22
memberSunasara Imdadhusen15-Oct-12 22:22 
Thanks for your appreciations! you will get more articles here Web App Development Company Blog[^]

sunaSaRa Imdadhusen
+91 99095 44184

GeneralMy vote of 5 Pin
Unareshraju14-Oct-12 20:11
memberUnareshraju14-Oct-12 20:11 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen15-Oct-12 22:20
memberSunasara Imdadhusen15-Oct-12 22:20 
QuestionValidation OnBlur or onfocusout.... suggestion Pin
enzorio25-Sep-12 6:32
memberenzorio25-Sep-12 6:32 
AnswerRe: Validation OnBlur or onfocusout.... suggestion Pin
Sunasara Imdadhusen15-Oct-12 22:19
memberSunasara Imdadhusen15-Oct-12 22:19 
GeneralMy vote of 5 Pin
TonyMeng14-Aug-12 20:36
memberTonyMeng14-Aug-12 20:36 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen15-Oct-12 22:19
memberSunasara Imdadhusen15-Oct-12 22:19 
QuestionExcellent Pin
yazanjaradat25-Jun-12 10:14
memberyazanjaradat25-Jun-12 10:14 
GeneralRe: Excellent Pin
Sunasara Imdadhusen25-Jun-12 19:44
memberSunasara Imdadhusen25-Jun-12 19:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 25 Jun 2012
Article Copyright 2012 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid