mohan babu mohan babu - 1 month ago 10
jQuery Question

Unable to customize the jQuery validation messages

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.

Answer

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>

Comments