jQuery Validation: How do I create a custom error message element (not just text)?

Question

I've seen a lot of examples on how to use message: to have custom error text. What I'm trying to achieve is something different.

I have client-side and server-side validation, so I want the same error message shown by both. To avoid duplication of code, it seems like having <div class="error" id="bad_email">Invalid e-mail</span> is the best approach.

I can't find a way to do this in the Validation jQuery plugin. Any ideas?

Answer 1

There is a way to do it, you should read the documentation of the plugin. Read it from the link here

Here is how to do it.

Use the invalidHandler.

$(".selector").validate({
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = errors == 1
          ? 'You missed 1 field. It has been highlighted'
          : 'You missed ' + errors + ' fields. They have been highlighted';
        /* .... put here the call to a custom function to display validation error */
        customvalidationdisplay(message,"show");

      } else {
        /* ... put here the call to a custom function to hide validation error if displayed */
          customvalidationdisplay("hide");
      }
    }
 });


function customvalidationdisplay(message,action){
/* write here your custom script to display the error if action = "show" or hide if action = "hide" */

}

I hope you have understood this by now. If not, feel free to ask me for more information.