CODEWITHSUNDEEP
jqueryhtmljquery-validatecustom-data-attribute
Jesse Atkinson
Jesse Atkinson

Reputation: 11406

jQuery Validate custom messages

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?

Upvotes: 18

Views: 21916

Answers (2)

Barry
Barry

Reputation: 29

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

Upvotes: 0

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102418

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/

Upvotes: 40

Related Questions