javascript - 最小和最大长度的 jQuery 验证不适用于 Bootstrap 4

Question

我无法让 jQuery 插件验证minlength和maxlength. 我看不到我指定的最小长度或最大长度的错误消息。联系表格和联系表格的jQuery代码如下：

联系表格：

<form id="contactForm" class="contact-form" action="form.php" method="POST">
    <div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
        <strong>Success!</strong> Message sent!.
    </div>
    <div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
        <strong>Error!</strong> There was an error.
        <span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-6">
            <label class="required font-weight-bold text-dark">Name</label>
            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <label class="font-weight-bold text-dark">Phone</label>
                <input type="text" value="" data-msg-required="Please enter your phone number." maxlength="100" class="form-control" name="subject" id="subject" required>
            </div>
        </div>
        <div class="form-group col-lg-6">
            <label class="required font-weight-bold text-dark">Email</label>
            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
        </div>
    </div>
</form>

    
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/additional-methods.js"></script>

Jquery 和 Javascripts 链接：

<script>
jQuery(function ($) {
  $("#contactForm").validate({
    errorClass: "error fail-alert",
    validClass: "valid success-alert",
    rules: {
      name : {
        required: true,
        minlength: 3
      },
      phone: {
        required: true,
        number: true,
        minlength: 8
      },
      email: {
        required: true,
        email: true
      },
    }
  });
});
</script>

<script>
  // 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);
})();
</script>

验证有效，但最小和最大长度不起作用，并且错误消息没有捕捉到这一点；或者，它给了我一个绿色勾号（即，已验证）。我不确定这是什么原因。

标签： javascripthtmljquery