Bootstrap驗證不適用於表單提交

Question

因此，我是Bootstrap的新手，到目前為止，我已經按照自己想要的方式進行了所有工作。 我創建了一個使用模態表單的聯系表單，並使用Mail函數通過PHP發送電子郵件。

我創建了一個腳本來對表單進行驗證。 如果驗證通過，我希望發送電子郵件。

當前，當用戶提交空白表單時，驗證不起作用，並且電子郵件正在發送。

請記住，我是使用Bootstrap的新手。

HTML

<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
                <h4 class="modal-title" id="myModalLabel">Contact Us</h4>
                <p><b>XXXX</b><br>
                    Company Phone: XXXXX
                </p>
              </div>
              <form id="contactForm" method="post" action="scripts/email.php">
                  <div class="modal-body">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here.">
                            <label for="name">Email</label>
                            <input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here.">
                            <label for="name">Subject</label>
                            <input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here.">
                            <label for="message">Message</label>
                            <textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea>
                        </div>
                    </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
              </form>
            </div>
          </div>
        </div>

腳本

    $(document).ready(function()
    {
        $validator = $("#contactForm").validate({
            errorClass:'error',
            validClass:'success',
            errorElement:'span',
            highlight: function (element, errorClass, validClass) { 
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
            }, 
            unhighlight: function (element, errorClass, validClass) { 
    $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
            },
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                subject: {
                    required: true,
                    minlength: 10
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true,
                    minlength: 10
                }
            },
            messages: {
                name: {
                    required: '<span class="help-inline">Your name is required</span>',
                    minlength: jQuery.format('<span class="help-inline">2 chars</span>')
                },
                subject: {
                    required: '<span class="help-inline">A Subject is required.
    </span>',
     minlength:jQuery.format('<span class="help-inline">10 characters</span>')
                },
                email: {
                    required: '<span class="help-inline">Email.</span>',
                    email: '<span class="help-inline">Ex : name@exemple.com</span>'
                },
                message: {
                    required: '<span class="help-block">Message</span>',
                    minlength: jQuery.format('<span class="help-block">10 chars</span>')
                }
            },
            submitHandler: function(form) 
            {
                $('form').submit(function() {
                    if ($validator.numberOfInvalids() > 0) 
                    {
                        $('#submit').modal('hide');
                    } else 
                    {
                        $('#submit').modal('show');
                    }
                });
            }
        });
    });

Answer 1

在每個輸入字段上添加“必填”。 確保每個字段都有數據的簡單方法

<form id="contactForm" method="post" action="scripts/email.php">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required />
                                <label for="name">Email</label>
                                <input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required />
                                <label for="name">Subject</label>
                                <input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required />
                                <label for="message">Message</label>
                                <textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea>
                            </div>
                        </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                      </div>
                  </form>

Answer 2

您是否已經包含了jQuery和驗證庫？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>