Geek Answers Handbook

How to display messages in invalidHandler in jQuery validator

I am trying to use the jQuery validator on the form and trying to find error messages in the invalidHandler option (or if there is somewhere else, tell me).

When the user clicks the submit button, regardless of the first error, I want to display a warning window with an error message. I do not want the error to be written to the document. I cannot figure out how to get error messages for use in warning after verification. I just found how to get the elements, and it really doesn't help me.

Drawing from the example, here is some code that I am testing with

$(document).ready(function() { $('#commentForm').validate({ invalidHandler: function(f, v) { var errors = v.numberOfInvalids(); if (errors) { var invalidElements = v.invalidElements(); alert(invalidElements[0]); } } }); });

and

  <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>A simple comment form with submit validation and default messages</legend> <p> <label for="cname">Name</label> <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
+4
source share
5 answers

This works for me ...

  invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'Please correct the following error:\n' : 'Please correct the following ' + errors + ' errors.\n'; var errors = ""; if (validator.errorList.length > 0) { for (x=0;x<validator.errorList.length;x++) { errors += "\n\u25CF " + validator.errorList[x].message; } } alert(message + errors); } validator.focusInvalid(); }
+7
source

Overloading showErrors worked as expected. I just needed to get the first error message.

  showErrors: function(errorMap, errorList) { alert(errorList[0].message); }

Also, don't forget to take a look at the onfocusout and onkeyup , otherwise you will get continuous messages.

+2
source

MUST check errorList.length

 if (errorList.length > 0) alert(errorList[0].message);
+2
source

You should not use an alert,

But if you really want to use it. The decision depends on how the plugin adds dom elements, but you can remove these dom elements in invalidHandler. So add this dom element, but remove it.

Another option: you should fix the plugin that you use for verification, and instead of adding a show show warning.

+1
source

I know the question is quite old, but to help other people get a better answer, I would advise you guys not to use invalidHandler, but showErrors.

This is because invalidHandler will only be called when the form is submitted. ShowErrors is called every time the field is updated.

So do the following:

Script at the end of the page

  $("form").validate({ rules: { name: { required: true } }, messages: { name: { required: "required" } }, highlight: function (element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error') $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove'); }, unhighlight: function (element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function (error, element) { if (element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } }, showErrors: function (errorMap, errorList) { var errors = this.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'Your form has 1 error' : 'Your form has ' + errors + ' errors.'; message = message + ' Please, fix then.' $("#error span").empty().html(message); $("#error").show(); } else { $("#error").hide(); } this.defaultShowErrors(); }, });

Do not forget your html tag

 <div id="error"><span></span></div>
0
source

More articles:


All Articles