How to add one custom message for one rule and default message for all other rules at jQuery validator

Question

I want to show a custom message for one rule and default message for all other rules. For example:

$("#form").validate({
        rules: {
            "ref": {
                required: true,
                minlength: 5,
                maxlength: 5,
                number: true
            }
        },
        messages: {
            "ref": {
                required: "Please, enter a reference",
                default: 'Please enter exact 5 numbers only'
            }
        }
   });

But, it's not working. It works if I repeat the message for all other rules such as:

messages: {
   "ref": {
      required: "Please, enter a reference",
      minlength: 'Please enter exact 5 numbers only',
      maxlength: 'Please enter exact 5 numbers only',
      number: 'Please enter exact 5 numbers only'
    }
}

Repeating the message for all other rules is only way to achieve this or there is a better way?

$("#form").validate({
        rules: {
            "ref": {
                required: true,
                minlength: 5,
                maxlength: 5,
                number: true
            }
        },
        messages: {
            "ref": {
                required: "Please, enter a reference",
                default: 'Please enter exact 5 numbers only'
            }
        },
        submitHandler: function (form) { // for demo
            console.log('valid form submitted'); // for demo
            return false; // for demo
        }
    });

body {
    padding: 20px;
}

label {
    display: block;
}

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

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

<form id="form" method="post" action="#">
    <label for="name">Reference</label>
    <input type="text" name="ref" id="ref" />
    <button type="submit">Submit</button>
</form>

I'm getting the default validation error if I put `123456` on blur. It looks like it's showing me some library's default message as it's not mentioned in the code: `Please enter no more than 5 characters.` — Wojciech Dynus, Dec 13 '19 at 10:02
Technically it should be `"Please enter no more than {0} characters."`, where the `{0}` is the placeholder that represents the first parameter of the rule. Then when you construct the generic messages, the placeholder is always replaced with whatever parameter used, in your case `5`. — Sparky, Dec 13 '19 at 16:16

score 1 · Accepted Answer · answered Dec 13 '19 at 10:07

You can give defaut message as below, this will apply for all validations (Here, message for number rule is static and maxlength and minlength message will be dynamic):

jQuery.extend(jQuery.validator.messages, {
    number: "Please enter exact 5 numbers only",
    maxlength: jQuery.validator.format("Please enter exact {0} numbers only."),
    minlength: jQuery.validator.format("Please enter exact {0} numbers only."),
});

Another suggestion is take one variable

str = "Please enter exact 5 numbers only"

and use it messages :

messages: {
   "ref": {
      required: "Please, enter a reference",
      minlength: str,
      maxlength: str,
      number: str
    }
}

How to add one custom message for one rule and default message for all other rules at jQuery validator

1 Answers1