Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Jquery Validation

    Încărcat de

    mohaideen
    69 vizualizări4 pagini
    Jquery validation plugin

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Jquery validation plugin

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    69 vizualizări4 pagini

    Jquery Validation

    Încărcat de

    mohaideen
    Jquery validation plugin

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    JQUERY FORM VALIDATION TUTORIAL

    This article discusses client-side validation using jQuery's validation plugin. This

    jQuery plugin has a


    bunch of standard validation methods such as a required field, valid email
    or URL, minimum and maximum lengths for a field, etc. In addition to
    that you can customize the look and feel of the error messages and their
    placement.
    Library required

    jQuery Library.

    jQuery Validation Plugin.

    Or alternatively you can use the hotlink welcome file:


    //hosted by Microsoft Ajax CDN
    <script
    src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.
    min.js"></script>

    //hosted by Google API


    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></scri
    pt>
    http://www.camcloud.com/blog/jquery-form-validation-tutorial?start=40

    JSP
    <!DOCTYPE HTML>
    <html>
    <head>

    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script
    src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></scri
    pt>
    <title>Basic jQuery Validation</title>
    </head>
    <body>
    <form id="myForm" name="" action="">
    <label for="name">Name:&nbsp;</label> <input name="name"
    size="20" />
    <input class="submit" type="submit" value="Submit" />
    </form>
    </body>

    Step 3: JS file (Simple validation rules)

    <script>
    $(function() {
    $("#form").validate(
    {
    rules : {
    name : {
    required : true,
    }
    },
    messages : {
    name : {
    required : "Please enter a name",
    }
    }
    });
    });
    </script>

    Step 4: jQuery Validation CSS


    Note: the jQuery Validation Plugin adds class error to the inputs/labels. You only style them!

    #form label.error {

    color:red;
    }
    #form input.error {
    border:1px solid red;
    }

    Lets add a bunch of new criteria such as minimum/maximum length and even
    custom messages.

    Ive also introduced the format method in the message. This lets us replace the
    argument given for minlength and maxlength. Here we dont have to worry about
    hard-coding that value if they ever change.

    Writing Your Own Validation Method

    In some cases if I can't find a suitable built-in method for my situation. Then I Can write my own
    validation method

    This is a regex example to test for special characters. Here Im allowing some
    special characters but others Im 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. Im certainly not an
    expert (far from it) so comments are most welcome. I hope this can help you on
    your way.

    http://jqueryvalidation.org/documentation

    http://www.sitepoint.com/jquery-ajax-validation-remote-rule/

    http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQueryValidation-Plugin

    All we are doing here is initializing the validation of the form using the validate() function. It can take
    several parameters. In the example above, we use only two of them, but you can find a list of all the
    options for thevalidate() function at http://docs.jquery.com/Plugins/Validation/validate#toptions.
    The two parameters we used are:

    rules: allows you to specify which fields you want to validate. In this case, we are
    validating name, email,url and comment. For each field, we specify if the field is required
    (required: true). We can specify that it must be a valid e-mail address, URL, etc.
    messages: allows you to specify the error message for a particular field (like the comments
    field in the example above). If you don't specify it, a default message is provided that says "this
    field is required".

    You can find an exhaustive list of built-in validation methods


    at http://docs.jquery.com/Plugins/Validation.

    S-ar putea să vă placă și