jquery validate empty error message

Question

I am validating a form with jquery validate and wanted to display error message only to the email field. I tried something like this

 messages: {
                       txtFirstName: '',
                       txtDob: '',
                       txtPhone: '',
                       txtEmail: "Por favor ingrese una dirección de correo válida. Ej: [email protected]",
                       Privacyid: ''
                   }

The error messages get displayed at the top, but p tag is getting created for each of the element. I just need to display error message for email alone.

showErrors: function (errorMap, errorList) {
                    var msg = "<p>Your form contains " + this.numberOfInvalids() + " errors, see details below.</p>"
                        $.each(errorMap, function(key, value) {
                           msg += "<p>" + value + "</p>";
                        });
                    $("#errormessages").html(msg);

                    this.defaultShowErrors();  // default labels from errorPlacement
                    if (this.numberOfInvalids() > 0) {
                        $("#errormessages").show();
                    } else {
                        $("#errormessages").hide();
                    }
                }

Yes. I need the error message only for email and not for other fields. — webdevexp
– webdevexp, Commented Nov 9, 2017 at 12:00

YouneL · Accepted Answer · 2017-11-09 12:31:28Z

1

Just remove showErrors property and let the plugin create your error elements, you can use errorElement property to specify the error tag:

$(document).ready(function() {

    $("#form").validate({
        errorElement: 'p',
        errorClass: 'error',
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Por favor ingrese una dirección de correo válida. Ej: [email protected]"
        }
    });


});

.error {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<form id="form">
    <fieldset>
        <legend>validate only email field</legend>
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="email">Email (required)</label>
            <input id="email" type="email" name="email">
            
        </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
    </fieldset>
</form>

answered Nov 9, 2017 at 12:31

YouneL

8,3692 gold badges30 silver badges52 bronze badges

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

1 Comment

YouneL Over a year ago

Can you show me your html code ? you should remove html validation attribute like required or maxlength, the validate plugin will also validate your fields based on these html attributes so you have to remove them too

Collectives™ on Stack Overflow

jquery validate empty error message

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related