Question

因此，我尝试使用Bootstrap 4及其附带的Javascript代码稍作修改后，在表单验证成功后显示成功模式。不知道这是否是处理它的正确方法。

想想我的event.showModal是错的。

<div class="row content">
    <div class="container">
        <div class="col">
            <form id="form" class="needs-validation" novalidate>
              <div class="form-group">
                <label for="exampleInputEmail1">Your Name <em class="required">*</em></label>
                <input type="Name" class="form-control" id="exampleInputName" aria-describedby="nameHelp" required>
                <div class="invalid-feedback">
                    Please add your name
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Your Email <em class="required">*</em></label>
                <input type="Email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"  required>
                <div class="invalid-feedback">
                    Please add a valid email
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Label <em class="required">*</em></label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required></textarea>
                <div class="invalid-feedback">
                    Please add some details
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Anything else you want us to know? <em class="required">*</em></label>
                <textarea class="form-control" id="exampleFormControlTextarea2" rows="6" required></textarea>
                <div class="invalid-feedback">
                    Just do it…
                </div>
              </div>

              <button type="submit" class="btn btn-primary btn-givi hvr-grow-shadow hvr-back-pulse">Submit</button>
            </form>
        </div>
        <div id="success" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <h1>Success</h1>
            </div>
          </div>
        </div>


(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();
       }
        else if (form.checkValidity() = true) {
           event.showModal('#Sucess');
        }
       form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

Answer 1

使用$('#success').modal("show") ...

  if (form.checkValidity() === false) {
     event.preventDefault();
     event.stopPropagation();
  }
  else if (form.checkValidity() == true) {
       $('#success').modal("show");
  }

演示：https://www.codeply.com/go/tDzkiKpS3A

另请注意，true的条件已更新......

(form.checkValidity() = true)应为(form.checkValidity() == true)

在Bootstrap 4中成功进行表单验证时显示成功消息

1 个答案: