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?

Masuria

Would something similar to what soupenvy suggests here #6778134 solve your issue? – Minhminho

@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? – Masuria

Answer 1

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/

Tantalize

you made my life easy – Lengel

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

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

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

Answer 2

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

Featherbedding