CODEWITHSUNDEEP
javascriptjqueryvalidation
user176994
user176994

Reputation:

How to display messages in invalidHandler in JQuery validator

I'm trying to use the JQuery validator on a form and am trying to figure out to get the messages of the errors in the invalidHandler option (or if there's somewhere else, do tell).

When a user clicks the submit button, whatever the first error is, I want to display an alert box with the message of the error. I don't want the error to be written on the document. I can't seem to figure out how to get the error messages to use in an alert after validation. I only found how to get the elements, and that doesn't really help me.

Pulling out from the example, here's some code I'm 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>

Upvotes: 6

Views: 27960

Answers (5)

Lucas
Lucas

Reputation: 639

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

Thats because invalidHandler will be called only when you submit your form while showErrors is called every time a field is updated.

So, do this:

Script in 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();
    },
});

Don't forget your html tag

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

Upvotes: 4

Charles Forsyth
Charles Forsyth

Reputation: 91

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();
    }

Upvotes: 9

breeze
breeze

Reputation: 41

MUST check errorList.length

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

Upvotes: 2

user176994
user176994

Reputation:

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

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

Also remember to take a look at the onfocusout and onkeyup options, else you'll get continuous messages.

Upvotes: 2

nexneo
nexneo

Reputation: 1219

You should not use alert,

But if you really want to use that. Solution depend of how plugin add dom elements but you can remove those dom elements in invalidHandler. So let those dom element added but remove it.

Other option is, you should patch plugin you use for validation and instead of adding dom show alert.

Upvotes: 1

Related Questions