javascript - 使用jQuery验证Bootstrap表单

我有一个Bootstrap表单，我基本上是试图遍历所有输入字段，检查它们是否具有required类并且它们的值是null，如果是，则添加一些CSS作为错误指示符。由于某些原因，if语句不起作用。

我的代码是：

$("#orderForm").on("submit", function(e) {
var formInputFields = $(".form-control")
formInputFields.each(function(i) {
  if (formInputFields[i].hasClass("required") && formInputFields[i].val() === "null") {
    e.preventDefault();
    formInputFields.css("border", "2px solid #741e4f");
  }
});

}）;

HTML遵循以下原则，但更长，相同的结构重复了form-group div：

<form class="form-horizontal" id="orderForm">
            <div class="form-group">
              <label for="" class="col-sm-4 control-label">Lorem</label>
              <div class="col-sm-6">
                <select name="" id="" class="form-control required">
                  <option value=""></option>
                  <option value="lorem">lorem</option>
                  <option value="ipsun">ipsun</option>
                </select>
              </div>
            </div>

最佳答案

当您说formInputFields[i].hasClass时，您的代码引发错误，因为formInputFields是jquery object而不是formInputFields[i]。由于您使用的是$.each，因此第二个参数将为您提供当前元素，而不是formInputFields[i]，您可以仅使用该第二个参数。另外，当您说cur.val()==="null"时，左右之间的对比会很强，即两者都应通过value和type匹配，这在此总是失败。因此，只需检查length的val，如果是0，则将是invalid element。以下是我所做的更改。检查一下，让我知道您是否遇到任何问题。

$("#orderForm").on("submit", function(e) {
  var formInputFields = $(".form-control")
  formInputFields.each(function(i, v) {
    var cur = $(v);
    if (cur.hasClass("required") && !(cur.val().length)) {
      e.preventDefault();
      cur.css("border", "2px solid #741e4f");
    }
    else
      cur.css("border", "");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal" id="orderForm">
  <div class="form-group">
    <label for="" class="col-sm-4 control-label">Lorem</label>
    <div class="col-sm-6">
      <select name="" id="" class="form-control required">
        <option value=""></option>
        <option value="lorem">lorem</option>
        <option value="ipsun">ipsun</option>
      </select>
    </div>
  </div>
  <input class="btn btn-info" type="submit" value="Submit" />
</form>

关于javascript - 使用jQuery验证Bootstrap表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37831674/