使用jQuery验证热切地验证表单元素集

时间:2017-01-25 15:47:19

标签: jquery jquery-validate

我有一个包含元素#a#b#c的表单。我需要执行的验证需要#a || (#b && #c)(即填写#a#b#c或全部三者。我有required和依赖项工作:

$(document).ready(function() {
  var AorBandC = function() {
    var hasA = $("#a").val().trim().length > 0;
    var hasBandC = $("#b").val().trim().length > 0 &&
      $("#c").val().trim().length > 0;

    return !(hasA || hasBandC);
  };

  var validator = $("#myform").validate({
    validClass: "valid",
    errorClass: "invalid",
    rules: {
      a: {
        required: AorBandC
      },
      b: {
        required: AorBandC
      },
      c: {
        required: AorBandC
      }
    },
    messages: {
      a: "",
      b: "",
      c: ""
    }
  });
  
  // this code manually validates all related controls
  $("#a").keyup(function() {
    validator.element("#b");
    validator.element("#c");
  });
  $("#b").keyup(function() {
    validator.element("#a");
    validator.element("#c");
  });
  $("#c").keyup(function() {
    validator.element("#a");
    validator.element("#b");
  });

  $("#myform").valid();
});
input.invalid {
  border: 1px solid gray;
  border-left: 4px solid red;
  padding-left: 6px;
}
input.valid {
  border: 1px solid gray;
  border-left: 4px solid green;
  padding-left: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>

<form action="#" method="post" id="myform">
  A <input type="text" id="a" name="a" />
  <br/>
  B <input type="text" id="b" name="b" />
  <br/>
  C <input type="text" id="c" name="c" />
  <br/>
  <input type="submit" text="Submit" />
</form>

我遇到的问题是,只要我有一个有效的输入,我想将所有现在的可选输入显示为有效,但这只能通过Tabbing或者代码来手动显示最后,感觉有点像黑客。 keypresskeydown存在的问题是,非活动元素只会在第二次击键时得到验证,而change只会在模糊时触发,这两种情况都不会更新,直到用户标签超出输入元素。

当然有更好的方法来实现同样的目标吗? require_from_group方法似乎无法处理这种情况。

0 个答案:

没有答案
相关问题