Question

我的要求：

我使用jQuery验证来验证表单字段。有两个领域的验证规则。

如果2个字段具有相同的错误，则显示一个错误消息。
如果2个字段有不同的错误，则显示每个错误。

问题：我尝试过使用“群组”，但它不符合我的要求[2]。当你点击另一个字段时，模糊事件会使错误结果变得质量。

我尝试过“errorPlacement”。我试图检查错误＆amp;隐藏一个相同的错误消息，但它最后不起作用。你可以在“errorPlacement”中引用我的代码。

您可以在此处查看我的代码：

$().ready(function() {
  // validate the comment form when it is submitted

  // validate signup form on keyup and submit
  $("#signupForm").validate({
    debug: true,
    rules: {
      num: {
        required: true,
        minlength: 2,
        max: 88888
      },
      num2: {
        required: true,
        minlength: 2,
        max: 88888
      }
    },
    messages: {
      num1: {
        required: "Please enter num",
        minlength: "Your num must be at least 5 characters long"
      },
      num2: {
        required: "Please enter num",
        minlength: "Your num must be at least 5 characters long"
      }
    },
    groups: {
      num: "num num2"
    },

    errorPlacement: function (error, element) {
      element.parent().append(error);

      var errAppend = "-error";
      var eleName = element.attr("name");
      var elSiblingsName = "";

      // error element
      var $ele01 = [];
      var $ele02 = [];

      // find $ele01 & $ele02
      var eleIndex = eleName.indexOf("2");
      if (eleIndex == -1) {
        $ele01 = $("#" + eleName + errAppend);
        $ele02 = $("#" + eleName + "2" + errAppend)
      } else {
        elSiblingsName = eleName.substr(0, eleName.length - 2);
        $ele01 = $("#" + elSiblingsName + errAppend);
        $ele02 = $("#" + eleName + errAppend);
      }

      // hide $ele02 if the text between $ele01 & $ele02 are the same
      // not null validation
      //if ($ele01.length != 0) {
      //  if ($ele02.length != 0) {
      //    // hide $ele02
      //    if ($ele01.text() == $ele02.text()) {
      //      $ele02.hide();
      //    }
      //  }
      //} else {
      //  if ($ele02.length != 0) {
      //    $ele02.show();
      //  } else {
      //    $ele02.hide();
      //  }
      //}

      if ($ele01.text()!="" && $ele02.text()!="") {
        if ($ele01.text() == $ele02.text()) {
          $ele02.hide();
        }
      }

      console.log(element.attr("name"));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.js"></script>
<form action="" method="get" name="signupForm" id="signupForm">
  <div style="">
    <input type="text" name="num">
    <input type="text" name="num2">
    <input type="submit" id="validate" value="validate">
  </div>
</form>

jQuery验证：为2个文件之间的每个错误显示一个错误消息

0 个答案: