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 stackoverflow.com/questions/6777634/… solve your issue? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented May 22, 2013 at 0: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
– Jesse Atkinson, Commented May 22, 2013 at 0:02

Leniel Maccaferri · Accepted Answer · 2013-05-22 00:52:27Z

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, 2013 at 0:52

answered May 22, 2013 at 0:04

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

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

4 Comments

San Over a year ago

you made my life easy

Leniel Maccaferri Over a year ago

@San: glad it was of help... :-)

San Over a year ago

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???

Leniel Maccaferri Over a year ago

@San... kindly ask a new question. This looks like a better way of handling it instead of here in a comment.

Barry · Accepted Answer · 2021-08-14 10:00:59Z

0

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) {...});

edited Aug 14, 2021 at 10:00

answered Aug 14, 2021 at 9:55

Barry

295 bronze badges

Collectives™ on Stack Overflow

jQuery Validate custom messages

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related