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 object ，而不是formInputFields[i]。由于您使用的是$.each，因此第二个参数会为您提供当前元素而不是formInputFields[i]，您可以使用该第二个参数。另外，当你说cur.val()==="null"时，它会在左右之间进行强有力的比较，即两者应该匹配value和type，而这里总是失败。因此，只需检查length的{{1}}以及 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", "");
  });
});

Answer 2

首先，当需要输入时，添加required as an attribute而不是类。

<input type="text" id="foo" placeholder="bar" value="" required>

然后，您将能够使用以下方法获取当前缺少值的任何所需输入：

var list_of_invalid_inputs = document.querySelectorAll('*:invalid');

或者如果你必须使用jquery like so。

同样的选择器也适用于css：

input:invalid { border: 2px solid #741e4f; }

Answer 3

您可以使用 $（this）而不是 formInputFields [i] .hasClass ... ，因为您需要对象来验证它是否具有“必需”类是否有价值，例如：

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

JSFiddle

使用jQuery验证Bootstrap表单

3 个答案: