jQuery Validate custom messages

Question

I have an input that I want to display a custom error message on when the user doesn't fill it out.

    <input type="text" class="foo" value="" data-prop="foo" data-rules="{ required: true }"></input>

How do I add a custom error message to this specific input?

Would something similar to what soupenvy suggests here http://stackoverflow.com/questions/6777634/jquery-validation-plugin-custom-message?rq=1 solve your issue? — Benjamin Gruenbaum, May 22 '13 at 00:01
@BenjaminGruenbaum Most-likely no. I'd prefer to avoid jQuery to override the message on just one. Isn't there a way to set this with an attribute? — Jesse Atkinson, May 22 '13 at 00:02

Leniel Maccaferri · Accepted Answer · 2013-05-22T00:52:27.783

40

Use:

data-msg-required="Please enter something here!"

Here's a demo HTML code: https://github.com/jzaefferer/jquery-validation/blob/master/demo/custom-messages-data-demo.html

JS Fiddle demo: http://jsfiddle.net/leniel/VuPPy/48/

edited May 22 '13 at 00:52

answered May 22 '13 at 00:04

Leniel Maccaferri

100,159
46
371
480

3

you made my life easy – San Jul 16 '14 at 10:33
1

@San: glad it was of help... :-) – Leniel Maccaferri Jul 16 '14 at 12:47
I have one more small question I am using data-rule-range="[14,30]" for range in my html5 form. I am using multistep form plugin of jquery stepy which uses jquery validate. How can i use the field from using only alphabets. I can use something like data-regex??? – San Jul 16 '14 at 16:55
1

@San... kindly ask a new question. This looks like a better way of handling it instead of here in a comment. – Leniel Maccaferri Jul 16 '14 at 16:57

Barry · Answer 2 · 2021-08-14T10:00:59.470

If you use jquery-validate.js library (https://jqueryvalidation.org/), you can also use js to do this job.

See my html part:

<input type="text" id="TBBusquedaDescripcionCategoriaEd" name="TBBusquedaDescripcionCategoriaEd" maxlength="300" class="form-control" required>

Then in js:

var validator = $("#formName").validate({
        rules: {
            TBBusquedaDescripcionCategoriaEd: {
                required: true,
                minlength: 4
            }
        },
        messages: {
            TBBusquedaDescripcionCategoriaEd: {
                required: "Mandatory field custom msg",
                minlength: "Minleght custom msg"
            }
        },
        submitHandler: function (form) {...});

jQuery Validate custom messages

2 Answers2

Linked