javascript - 多个 Bootstrap 卡片的表单验证

Question

我正在使用 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

Answer 1

观察

• 我添加了一个类隐藏。
• 我已经为每张卡添加了 ID。
• 使用这些 ID，我找到了错误元素并删除了类 hide。
• 我设置 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>