ブートストラップ形式の日付と時刻フィールドのjQueryの検証

Question

jQueryによる検証を行ったブートストラップフォームがありますが、これは現時点では正しく動作していないため、動作させるには十分な知識がありません。 私がしようとしているのは、送信ボタンがクリックされたときです。私の検証基準に従ってフィールドが設定されていない場合、検証によってメッセージが表示されるはずです。 問題は、日付と時刻のフィールドがあるため、検証作業を行う方法がわかりません。彼らはいくつかのデフォルト値を持っています、そして、基本的に私はいくつかの有効な日付と時間の代わりにデフォルト値を保存することができます。

現時点では、検証標準に従って設定されていない場合、reasonフィールドのメッセージはフォームにのみ表示されます。ここで

の形式である：

<form class="form-horizontal form" id="validate-form"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="date">Date:</label> 
     <div class="col-sm-2 " class="dpckr" > 
     <!-- <input class="form-control " id="date " name="date " placeholder="MM/DD/YYY " type="text "/> --> 
      <input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date" required> 
     </div> 
     </div> 
     <div class="form-group "> 
     <label class="control-label col-sm-2 " for="text ">Hour:</label> 
     <div class="col-sm-2 "> 
      <select class="form-control sct" id="time" name="time"> 
      <option value="" class=" ">Time</option> 
      <option value="10am " class=" ">10:00-10:30</option> 
      <option value="1030am " class=" ">10:30-11:00</option> 
      </select> 
     </div> 
     </div> 
     <div class="form-group "> 
     <label class="control-label col-lg-2 " for="reason ">Reason:</label> 
     <div class="col-lg-3 "> 
      <textarea class="form-control " id="reason" name="reason" placeholder="Describe the reason" rows="5 "></textarea><br> 
     </div> 
     </div> 
     <div class="form-group "> 
     <div class="col-sm-offset-2 col-sm-10 "> 
      <button id="saveAppt" type="button" class="btn btn-default ">Submit</button> 
     </div> 
     </div> 
    </form> 

とフォームバリデーション：

$("#validate-form").validate({ 
    //specify the validation rules 
    rules: { 
    date: "required", 
    time: "required", 
    reason: { 
     required: true, 
     minlength: 40 
    } 
    }, 

    messages: { 
    date: "Date must be selected!", 
    sct: { 
    required: "Time option must be selected!", 
    }, 
    reason: { 
    required: "Reason filed cannot be blank!", 
    minlength: "Reason must be descibed in at least 40 characters." 
    } 
    }, 

    submitHandler: function(form){ 
    form.submit(); 
    } 

    }); 

submitボタンがクリックされたときに、私はこの検証をトリガーすることができる方法も私には明確ではないでしょうか？

$("#saveAppt").click(function(e)に入れてください。これは上記のフォームの送信ボタンにバインドされていますか？

Answer 1

実際にフォームを送信している間は、検証プラグインが自動的に送信イベントをキャプチャして、ボタンのタイプを「送信」から「送信」に変更するか、タイプが提供されていない場合、ブラウザのうちのどれかが提出されます）。

 <button id="saveAppt" type="submit" class="btn btn-default ">Submit</button> 

編集：私はそれはいくつかのスタイリングを必要とするが、あなたは、コードの作業を見ることができますあなたのためにjsfiddleを

設定しました。コンソールで、検証プラグインの実行中にエラーがないことを確認してください。

https://jsfiddle.net/vc4vvrL0/7/