简体   繁体   中英

Jquery Validation All Errors shows in one alert box only

I have a form where I can do jquery validation in one by one show error in an alert box.

I have required to show all validation error messages into one alert box for all those required fields (single or multiple fields) and not repeat the alert box display one-time only.

Is this possible?

example :

在此处输入图片说明

Here! the Issue

  <form id="myform" action="post">
      <input type="text" name="email" />
      <input type="text" name="name" />
        <input type="submit" />
  </form>
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="  https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
    var allerror="";
      $('#myform').validate({ // Jquery Validation
          onclick: false,
          onkeyup: false,
          rules: {
              email: {
                  required: true,
                  email: true
              },
              name: {
                  required: true,
                  minlength: 5
              }

          },
          messages: {
                         email: {
                                 required: "The Email is required!"
                         },
                         name: {
                                 required: "The name is required!"
                         }
                    },
                    errorPlacement: function (error, element) {
                allerror += error.text();
                                alert(allerror);
                    }
      });
    });
  </script>

Instead of errorPlacement use invalidHandler as follow:

  invalidHandler: function(form, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    if (validator.errorList.length > 0) {
        for (x=0;x<validator.errorList.length;x++) {
            errors += validator.errorList[x].message;
        }
    }
    alert(errors);
  }
}

Edit : If you dont want html labels for errors this should work :

           errorPlacement: function (error, element) {
              return false;
            },

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM