javascript - 使用 jQuery 验证 Bootstrap 表单

Question

我有一个 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>

Answer 1

当您说 formInputFields[i].hasClass 时，您的代码抛出错误，因为 formInputFields 是一个 jquery 对象但不是 formInputFields[i]。由于您使用的是 $.each，第二个参数将为您提供当前元素，而不是 formInputFields[i]，您可以只使用第二个参数。此外，当您说 cur.val()==="null" 时，左右之间将进行强比较，即两者应通过 value 和 type 匹配 在这里总是失败。所以只需检查 val 的 length ，如果它是 0 那将是 invalid元素。以下是我所做的更改。检查它，如果您遇到任何问题，请告诉我。

$("#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>