フォーム提出時にブートストラップの検証が機能しない

Question

私はブートストラップを始めたばかりで、これまでのところ私が望むようにすべての作業をしています。私はモーダルフォームを使用するコンタクトフォームを作成し、メール機能を使用してPHPを介して電子メールを送信します。

フォームで検証を行うためのスクリプトを作成しました。妥当性チェックが合格すると、電子メールを送信します。

現在、ユーザーが空白のフォームを送信すると、検証が機能しなくなり、電子メールが送信されます。

私はブートストラップを扱うのが初めてです。 '必要な' 各入力フィールドの追加]を

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>