How to add validation rules with messages in jQuery validation?

Question

I've tried below code but can't get error messages.

var v = jQuery("#account_info").validate({
    //errorLabelContainer: $("#result"),
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({                               
           target: "#checkOut_error",                   
            success: function(msg) {
                //setTimeout("window.location='MyBids.php'", 2000);             
                if(msg == '<?php echo OBJECT_STATUS_SUCCESS;?>')    {
                    $('#checkOut_error').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
                    //setTimeout("window.location='"+<?php echo LINK_TO_TENBID;?>+"'", 2000);
                    //setTimeout("window.location.reload(true)",2000);
                   //$('.result').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');

                } else{
                                        $("#checkOut_error").html(msg);
                                    }
            },
            clearForm:  false,
            resetForm:  false
        });
    },
           errorLabelContainer: "#checkOut_error",
          rules: {
                phone_number: {
                    required: true

                },
                recipient_name: {
                    required: true,
                    min_length: 6
                }

          },
          messages: {
                recipient_name: {
                    required: "Enter recipient name",
                    min_length: "Name should be atleast 6 characters long"
                }
          }
 });

-How to add rules and error messages?

-Which attribute does validation plugin uses: name or id?

-How to show one error message at a time?

have you read its document? I think its has information that you need. docs.jquery.com/Plugins/Validation — Pitsanu Swangpheaw
– Pitsanu Swangpheaw, Commented Jan 22, 2013 at 14:35
Quote OP: "How to should one message at a time?" ~ the grammar of this question is broken. Please rephrase. — Sparky
– Sparky, Commented Jan 22, 2013 at 15:05

Sparky · Accepted Answer · 2013-01-22 15:14:13Z

10

-Which attribute does validation plugin uses: name or id?

As per documentation, the plugin requires that all input fields contain a name attribute. When specifying the rules and messages inside .validate(), you would use the name attribute.

-How to add rules and error messages?

The min_length rule should not contain an underscore. It's minlength. Otherwise, your code looked correct.

Simple demo based on your code...

jQuery:

$(document).ready(function () {

    $("#account_info").validate({
        rules: {
            phone_number: {
                required: true
            },
            recipient_name: {
                required: true,
                minlength: 6  // <-- removed underscore
            }
        },
        messages: {
            phone_number: {
                required: "this field is required"
            },
            recipient_name: {
                required: "Enter recipient name",
                minlength: "Name should be at least {0} characters long" // <-- removed underscore
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');  // for demo
            return false;  // for demo
        }
    });

});

HTML:

<form id="account_info">
    <input type="text" name="phone_number" />
    <br/>
    <input type="text" name="recipient_name" />
    <br/>
    <input type="submit" />
</form>

Working jsFiddle Demo: http://jsfiddle.net/rfgRL/

Also, when using a rule like minlength, your custom message can contain a placeholder, {0}, that inserts your specific rule definition.

minlength: 6

with a custom message...

minlength: "Name should be at least {0} characters long"

will automatically display...

Name should be at least 6 characters long

Since you only call .validate() once on DOM ready to only initialize the validation plugin with its options, there is no purpose in assigning it to a variable; it's not being re-used anywhere... at least it shouldn't be.

var v = jQuery("#account_info").validate({...});

Would simply be this...

jQuery("#account_info").validate({...});

Elsewhere in your code, if you needed to test the form for validity or re-trigger a validity test, use the .valid() method. It will both return a boolean and trigger display of any pending form errors. Example:

if (jQuery("#account_info").valid()) { ...

edited Jan 22, 2013 at 15:14

answered Jan 22, 2013 at 14:49

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sparky Over a year ago

@EjazKarim, please "accept" my answer by clicking he green checkmark if it solved your question.

Humphrey Over a year ago

Your answer was so helpful to me mwa

Abaij Over a year ago

@Sparky thanks for the explanation... but I wonder how to add styling to error message? I try adding error_message_class parameter but it doesn't work

Sparky Over a year ago

@Abaij, hint: label.error. However, it's not appropriate to hijack comments to ask an unrelated question. Please post a new question.

Suresh Atta · Accepted Answer · 2013-01-22 14:44:55Z

0

here is a simple jquery registration(signup) validator :

        $('#submitButton').click(function() {
        $("#accounterForm").validate({
    rules: {
        firstName: "required",
        lastName: "required",
        companyName: {
            required: true,
            no_special_characters: true,
            maxlength: 64
        },
        companyFullName: "required",
        password: {
            required: true,
            minlength: 6
        },
        confirmPassword: {
            required: true,
            minlength: 6,
            equalTo: "#mid-box4"
        },
        emailId: {
            required: true,
            email: true
        }
    },
    messages: {
        firstName: "Please enter your first name",
        lastName: "Please enter your last name",
        companyName: "Please enter company ID",
        companyName: {
            required: "Please enter company ID",
            no_special_characters: "Company ID should contain atleast one letter and no special characters",
            maxlength: "Company ID exceeded the maximum length"
        },
        companyFullName: "Please enter company name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
        confirmPassword: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long",
            equalTo: "Please enter the same password as above"
        },
        emailId: "Please enter a valid email address",
        confirmemailId:{
        required:"Please confirm email address",
        equalTo :"Emailid and confirm emaild must be same"
        },
        agree: "Please accept Terms of use"
    }
});

answered Jan 22, 2013 at 14:44

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

1 Comment

Sparky Over a year ago

-1 for putting .validate() inside of a click handler. .validate() should be called once on DOM ready to initialize the plugin, not every time the submit button is clicked. Your method will result in a form that does no live validation whatsoever until after the submit button is clicked, and then redundantly re-initializes the plugin every time. Additionally, the plugin already has it's own submitHandler that captures this same click event.

Collectives™ on Stack Overflow

How to add validation rules with messages in jQuery validation?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related