引導表單中的日期和時間字段的jQuery驗證

我有一些jQuery驗證的靴子形式，目前工作不正常，我沒有足夠的知識使它工作。我打算做的是當點擊提交按鈕時，驗證應該顯示一條消息，如果字段沒有根據我的驗證標準設置。問題是我有一個日期和時間的字段，我不知道如何爲他們進行驗證工作。他們有一些默認值，現在基本上我可以保存默認值而不是一些有效的日期和時間。引導表單中的日期和時間字段的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)，它綁定到上面顯示的窗體的提交按鈕嗎？

來源

2016-11-20 Robert Ross

我相信只要您實際提交表單，嘗試將按鈕的類型從「按鈕」更改爲「提交」或者將其全部刪除（大多數如果沒有提供類型，瀏覽器將返回提交）。

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

編輯：

我已經設置了的jsfiddle你在這裏你可以看到代碼工作，儘管它需要一些造型。檢查你的控制檯，以確保沒有錯誤停止你的驗證插件運行。

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

來源

2016-11-20 10:14:00

我試過了，但上單擊窗體仍提交和驗證仍然不爲我的日期和時間字段 –

工作，你必須檢查你的錯誤控制檯？還要將value =「Click to select date」更改爲placeholder =「Click to select date」，因爲它會導致驗證插件假定它已被填充。 –

引導表單中的日期和時間字段的jQuery驗證

回答

相關問題