【问题标题】：Form Validation over multiple Bootstrap Cards多个引导卡上的表单验证
【发布时间】：2018-01-26 00:09:04
【问题描述】：

我正在使用 Bootstrap 4 和 jQuery。目前我有一张表格，里面有两张（或更多）BS卡。每张卡片都包含应添加的客户数据字段。

我已经集成了自定义验证，但目前我被卡住了。我不仅希望颜色显示有效和无效字段。我还想在卡片的标题中有一个小图标，其中包含无效的表单字段。

在我的 CodePen 示例中，您可以看到图标已经出现。但如前所述，只有在该卡中有错误（无效字段）时才会出现这种情况。

<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>

$(document).ready(function () {

  window.addEventListener('load', function () {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('custom-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();



        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#"  method="post" class="custom-validation" novalidate>

  <div class="row p-3">

    <!-- Card 1 -->
    <div class="col-6 mb-2">

      <div class="card pax-details">
        <div class="card-header card-header-primary d-flex justify-content-between">
          <span>Customer 1</span>
          <span>
            <i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
            <i class="fa fa-user" aria-hidden="true"></i>
          </span>
        </div>
        <div class="card-body card-body-secondary collapse show">

          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
            </div>
          </div>

        </div>
      </div>

    </div>

    <!-- Card 2 -->
    <div class="col-6 mb-2">

      <div class="card pax-details">
        <div class="card-header card-header-primary d-flex justify-content-between">
          <span>Customer 2</span>
          <span>
            <i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
            <i class="fa fa-user" aria-hidden="true"></i>
          </span>
        </div>
        <div class="card-body card-body-secondary collapse show">

          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
            </div>
          </div>
          
        </div>
      </div>

    </div>

  </div>
  
  <div class="row px-3">
    <div class="col">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>    
  </div>

</form>

如何解决？我需要为这里的每张卡片填写额外的表格吗？

代码笔：https://codepen.io/SchweizerSchoggi/pen/OzevKy

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

观察

我添加了一个隐藏类。
我已为每张卡添加了 ID。
通过这些 ID，我可以找到错误元素并删除类隐藏。
我将 event.preventDefault 设置为示例，以避免发送该表单时出错。

$(document).ready(function() {

  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('custom-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {

          event.preventDefault(); // Rebemeber to remove this
          event.stopPropagation(); // Rebemeber to remove this
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();

          if ($('#card_body_1').find('.form-control:invalid').size() > 0) {
            $('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
          } else {
            $('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
          }

          if ($('#card_body_2').find('.form-control:invalid').size() > 0) {
            $('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
          } else {
            $('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
          }

        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);

});

.hide {
  display: none !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>

  <div class="row p-3">

    <!-- Card 1 -->
    <div class="col-6 mb-2">

      <div class="card pax-details">
        <div class="card-header card-header-primary d-flex justify-content-between">
          <span>Customer 1</span>
          <span>
            <i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
            <i class="fa fa-user" aria-hidden="true"></i>
          </span>
        </div>
        <div id='card_body_1' class="card-body card-body-secondary collapse show">

          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
            </div>
          </div>

        </div>
      </div>

    </div>

    <!-- Card 2 -->
    <div class="col-6 mb-2">

      <div class="card pax-details">
        <div class="card-header card-header-primary d-flex justify-content-between">
          <span>Customer 2</span>
          <span>
            <i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
            <i class="fa fa-user" aria-hidden="true"></i>
          </span>
        </div>
        <div id='card_body_2' class="card-body card-body-secondary collapse show">

          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
            </div>
          </div>
          <div class="form-group form-row">
            <label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
            <div class="col-3 col-md-3 col-lg-2">
              <input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
            </div>
          </div>

        </div>
      </div>

    </div>

  </div>

  <div class="row px-3">
    <div class="col">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>

</form>

【讨论】：

太棒了，以利亚撒。感谢您打开我的眼睛。我以前从未做过类似的事情......我只是在那个 jQuery 行中用 length 替换了 size() ，这就像一个魅力。
哦，我添加了一个each循环，因为我不知道会有多少张卡片，它们将被动态添加。 $('.card-body').each(function () { if ($(this).find('.form-control:invalid').length > 0) { $(this).parent().children ('.card-header').find('.fa-exclamation-circle').removeClass('d-none'); } else { $(this).parent().children('.card-header' ).find('.fa-exclamation-circle').addClass('d-none'); } });
@SchweizerSchoggi 真棒:-)