Unable to customize the jQuery validation messages

Question

I am new to Jquery, I am trying to validate my form.Attached is my HTML5 code.

<form action="" method="post" id="form-register">
    <input type="text" id="firstNumber" class="form-control" data-rule-
           minlength="9" data-rule-maxlength="9" data-rule-number="true" data-
           rule-required="true" data-msg-required="true" />
    <input type="text" id="SecondNumber" class="form-control" data-rule-
           minlength="9" data-rule-maxlength="9" data-rule-number="true" data-
           rule-required="true" data-msg-required="true" />
    <input type="submit" value="submit">
</form>

I have the following Jquery code.

$("#form-register").validation({
    messages: {
        firstNumber: {
            required:"first number is required",
            number: "Please enter only numbers for Claim number 1 ",
            minlength: "Please enter 9 digit Number for First number ",
            maxlength: "Please enter 9 digit Number for First number"
        },
        secondNumber: {
            required:"Second number is required",
            number: "Please enter only numbers for Second number",
            minlength: "Please enter 9 digit Number for Second number ",
            maxlength: "Please enter 9 digit Number for Second number"
        }    
    },

Here my question is , When i enter a value in my input text which is less than the minimum length i.e 9 in either of the text boxes,it is giving me:

"Please enter 9 characters."

However, I want this message to be customized as

"Please enter 9 digit Number for firstNumber".

Is this possible through jQuery Validation Plugin? or should i use any third party library??

Any help would be highly appreciated.

gaetanoM · Accepted Answer · 2016-10-22 21:29:07Z

Because you are using jQuery Validate with HTML5 Data Attribute Rules you may consider to change:

from:

data-msg-required="true"

to:

data-msg-required="first number is required"
data-msg-number="Please enter only numbers for Claim number 1"
data-msg-minlength="Please enter 9 digit Number for First number"
data-msg-maxlength="Please enter 9 digit Number for First number"

You could take a look to: this article

Snippet:

$("#form-register").validate();

$('input[type="submit"]').on('click', function(e) {
  if(!$("#form-register").valid()){
    e.preventDefault();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

<form action="" method="post" id="form-register">
    <input type="text" id="firstNumber" class="form-control" data-rule-
           minlength="9" data-rule-maxlength="9" data-rule-number="true" data-rule-required="true"
           data-msg-required="first number is required"
           data-msg-number="Please enter only numbers for Claim number 1"
           data-msg-minlength="Please enter 9 digit Number for First number"
           data-msg-maxlength="Please enter 9 digit Number for First number"/>
    <input type="text" id="SecondNumber" class="form-control" data-rule-
           minlength="9" data-rule-maxlength="9" data-rule-number="true" data-rule-required="true"
           data-msg-required="Second number is required"
           data-msg-number="Please enter only numbers for Second number"
           data-msg-minlength="Please enter 9 digit Number for Second number"
           data-msg-maxlength="Please enter 9 digit Number for Second number"/>
    <input type="submit" value="submit">
</form>

Collectives™ on Stack Overflow

Unable to customize the jQuery validation messages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related