0

我开始学习 Bootstrap 4 验证，几乎没有什么我不清楚的。在不需要的输入字段显示valid-feedback/的情况下，某些情况会令人困惑invalid-feedback。另外，我想知道是否有一种方法可以通过单击按钮而不是提交过程来触发验证？这是我到目前为止的示例：

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="container">
  <fieldset class="fieldset-info">
    <legend class="hcs-legend">Add New Profile</legend>
    <form name="new-profile" id="new-profile" class="needs-validation" novalidate>

      <div class="form-group required">
        <label for="agency">Profile Name:</label>
        <input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
        <div class="invalid-feedback">Please provide Profile Name</div>
      </div>
      <div class="form-group required">
        <label>Type:</label>
        <select class="custom-select browser-default" name="type" id="type" required>
          <option value="">--Select Type--</option>
          <option value="1">Large</option>
          <option value="2">Medium</option>
          <option value="3">Small</option>
        </select>
        <div class="invalid-feedback">Please provide Type</div>
      </div>

      <div class="form-group row required">
        <label class="col-2 col-form-label" for="fname">First Name:</label>
        <div class="col-10">
          <input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
          <div class="invalid-feedback">Please provide First Name</div>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
        <div class="col-10">
          <input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
        </div>
      </div>

      <div class="form-group row required">
        <label class="col-2 col-form-label" for="lname">Last Name:</label>
        <div class="col-10">
          <input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
          <div class="invalid-feedback">Please provide Last Name</div>
        </div>
      </div>

      <div class="form-group row required">
        <label class="col-2 col-form-label" for="email">Email:</label>
        <div class="col-10">
          <input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
          <div class="invalid-feedback">Please provide Email</div>
        </div>
      </div>

      <div class="row">
        <div class="col-12"><strong><u>Physical Address</u></strong></div>
      </div>
      <div class="form-row">
        <div class="form-group col-6 required">
          <div class="row">
            <label class="col-3 col-form-label" for="Addr1">Address 1:</label>
            <div class="col-9">
              <input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
              <div class="invalid-feedback">Please provide Address 1</div>
            </div>
          </div>
        </div>
        <div class="form-group col-6 required">
          <div class="row">
            <label class="col-2 col-form-label" for="city">City:</label>
            <div class="col-10">
              <input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
              <div class="invalid-feedback">Please provide City</div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <div class="row">
            <div class="col-3">
              <label for="Addr2">Address 2:</label>
            </div>
            <div class="col-9">
              <input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
            </div>
          </div>
        </div>
        <div class="form-group col-6 required">
          <div class="row">
            <label class="col-2 col-form-label" for="state">State:</label>
            <div class="col-10">
              <select class="custom-select browser-default" name="state" id="state" required>
                <option value="">--Select State--</option>
                <option value="ny">New York</option>
                <option value="fl">Florida</option>

              </select>
              <div class="invalid-feedback">Please provide State</div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <div class="row">
            <label class="col-3 col-form-label" for="Addr3">Address 3:</label>
            <div class="col-9">
              <input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
            </div>
          </div>
        </div>
        <div class="form-group col-6 required">
          <div class="row">
            <label class="col-2 col-form-label" for="zip">Zip:</label>
            <div class="col-10">
              <input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
              <div class="invalid-feedback">Please provide Zip</div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-6">
          <div class="row">
            <label class="col-3 col-form-label" for="Addr4">Address 4:</label>
            <div class="col-9">
              <input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
            <label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12"><strong><u>Access options</u></strong></div>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
        <label class="form-check-label" for="flag_1">Allow for access level 1?</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
        <label class="form-check-label" for="flag_2">Allow for access level 2?</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
        <label class="form-check-label" for="flag_3">Allow for access level 3?</label>
      </div>

      <div class="row">
        <div class="col-12 text-center">
          <input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
        </div>
      </div>
    </form>
  </fieldset>
</div>

在上面的示例中，我使用来自 Bootstrap 网站的代码进行验证。关于它如何工作的解释很少。我有几个问题：

  1. 由于我将使用 ajax 向服务器发送请求，如何触发点击验证？

  2. 为什么不需要的字段变成绿色（输入周围的颜色）？

  3. 如果输入值正确与否，我如何使用模式属性来验证用户的自定义消息？

请让我知道是否有人知道如何实现这一目标？

谢谢你。

4

0 回答 0