Question

我需要你的帮助才能解决问题。我正在使用jQuery Validation插件来验证表单，我想显示验证摘要以及每个无效字段的验证消息。我尝试了以下代码，但遇到了2个问题;

问题1： 无效字段的错误消息未显示。

问题2： 错误摘要显示所有错误的列表，但没有字段的名称。我认为该插件使用＆＃39; errorList＆＃39;数组，它同时包含元素的名称及其错误消息，但我不知道如何使用它。参考：https://jqueryvalidation.org/validate

HTML

<form id="theForm" class="formContainer">
   <div id="errorSummary">
      <div class="summaryTitle">
         <!-- FOR ERROR TITLE -->
      </div>
      <ul>
         <!-- FOR ERROR LIST -->
      </ul>
   </div>
   <div class="formbox">
    <label>First Name:</label>
    <input type="text" name="FirstName" class="required">       
   </div>
   <div class="formbox">
    <label>Last Name:</label>
    <input type="text" name="Last Name" class="required">       
   </div>
   <button type="Submit" id="submitButton">Submit</button>
</form>

SCRIPT

<script>
$(document).ready(function(){
   $("#theForm").validate({
     debug:true,
        errorLabelContainer: "#errorSummary ul",
        wrapper: "li",
        invalidHandler: function(event, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {                       
                  var message = errors == 1
                    ? '<h4>Submission Failed</h4>You missed 1 field. It has been highlighted'
                    : '<h4>Submission Failed</h4>You missed ' + errors + ' fields. They have been highlighted';
                  $("#errorSummary div.summaryTitle").html(message);
                  $("#errorSummary").show();
                } else {
                  $("#errorSummary").hide();
                }
        },
   });
});
</script>

请注意： 我已将该插件的errorPlacement属性用于其他用途

Answer 1

这就是我在angular.js中的表现。包括angular-validator.js，只需使用像这样的输入字段

<input class="form-control" type="number" validate-on="blur" required required-message="'required'" readonly>

其中required-message是您要显示的消息

希望它适合你

jQuery Validation Plugin - 显示错误消息和错误摘要

1 个答案: