2015-12-11 70 views
19

是否可以使用JQuery驗證來驗證引導日期選擇器?由於它不公開input字段,我無法驗證它。從引導formhelpers驗證引導日期選擇器

實施例:https://jsfiddle.net/Khrys/2rcr9j5s/

$.validator.setDefaults({ 
    submitHandler: function() { 
     form.submit() 
    } 
}); 


$().ready(function() { 
var container = $('div.containerx'); 

    $("#Form").validate({ 
     ignore: [], 
     messages: { 
      StartTime: { 
       required: "Select the StartTime." 
      } 
     }, 
     errorContainer: container, 
     errorLabelContainer: $("span", container), 

     highlight: function (element, errorClass, validClass) { 
      $('#StartTime').addClass("btn-danger"); 
      $('#Filter').addClass("btn-danger"); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
      $('#StartTime').removeClass("btn-danger"); 
      $('#Filter').removeClass("btn-danger"); 
     } 
    }); 
}); 

更新:

類需要被正確地施加到元件btn-danger

https://jsfiddle.net/2rcr9j5s/4/

+0

已更新小提琴,並已設置要求datepicker – Sanchit

回答

1

已經更新了小提琴:https://jsfiddle.net/2rcr9j5s/1/

   $.validator.setDefaults({ 
       submitHandler: function() { 
        form.submit() 
       } 
      }); 

      $().ready(function() { 

       var container = $('div.containerx'); 

       $("#Form").validate({ 
        ignore: [], 
        rules:{ 
         StartTime: { 
          required: true 
         } 
        }, 
        messages: { 
         StartTime: { 
          required: "Select the StartTime." 
         } 
        }, 
        errorContainer: container, 
        errorLabelContainer: $("span", container), 

        highlight: function (element, errorClass, validClass) { 
         $('#StartTime').addClass("btn-danger"); 
         $('#Filter').addClass("btn-danger"); 
        }, 
        unhighlight: function (element, errorClass, validClass) { 
         $('#StartTime').removeClass("btn-danger"); 
         $('#Filter').removeClass("btn-danger"); 
        } 
       }); 
      }); 

設置爲需要的日期選擇器。

這是你所需要的?

+0

感謝您的時間。您提供的示例是將btn-danger添加到整個div,因此它會丟失圓角。我已經用你的建議更新了這個例子,但仍然需要這個類被正確應用。 – Khrys

+0

你需要什麼元素才能應用這個類?目前(在您更新的小提琴中),它正在輸入元素上。請澄清 – Sanchit

+0

它不是在'輸入'它是在一個div中。應該在輸入中。謝謝。 – Khrys

-1

您無法使用javascript進行驗證。使用jquery。 試試這個。

$.validator.setDefaults({ 
        submitHandler: function() { 
//////////////////////////// you can write your validation/////////////////////////////   

      var x = $("[name=StartTime]").val(); 
      alert(x); 
///////////////////////////////////////////////////////////////////////////////////////   
         form.submit(); 
        } 
       }); 

       $().ready(function() { 

        var container = $('div.containerx'); 

        $("#Form").validate({ 
         ignore: [], 
         messages: { 
          StartTime: { 
           required: "Select the StartTime." 
          } 
         }, 
         errorContainer: container, 
         errorLabelContainer: $("span", container), 

         highlight: function (element, errorClass, validClass) { 
          $('#StartTime').addClass("btn-danger"); 
          $('#Filter').addClass("btn-danger"); 
         }, 
         unhighlight: function (element, errorClass, validClass) { 
          $('#StartTime').removeClass("btn-danger"); 
          $('#Filter').removeClass("btn-danger"); 
         } 
        }); 
       }); 
+0

您可以針對「x」進行驗證。 –

0

根據你的代碼看起來輸入元素不處於活動狀態,所以我們不得不將其激活時首先亮點功能是called.So我們可以添加活動類,使其主動先再申請 btn-danger class。所以,你的代碼應該像

highlight: function (element, errorClass, validClass) { 
      $(element).addClass("active"); 
      $(element).addClass("btn-danger"); 
      $('#Filter').addClass("btn-danger"); 
     }, 
unhighlight: function (element, errorClass, validClass) { 
      $(element).removeClass("active"); 
      $(element).removeClass("btn-danger"); 
      $('#Filter').removeClass("btn-danger"); 
     } 

更新小提琴是:https://jsfiddle.net/anulesh91/2rcr9j5s/10/

0

您更新小提琴:https://jsfiddle.net/2rcr9j5s/4/

絕對是精細和jQuery驗證被確認只是becasue BTN-危險類的文本中輸入框是白色的。你只需要添加

color: black;到該輸入框,其餘代碼工作正常。

0

我從來沒有使用這個插件,但我確實快速瀏覽了文檔,並且有一種方法可以編寫HTML和JavaScript,以便您可以控制創建自己的輸入字段。但是,我只是試圖回答你的問題,所以你不用花太多時間移動代碼。

要回答你的問題,如果你檢查瀏覽器中的元素,你會看到輸入名稱是「StartTime」。

因此,您真正需要做的就是提交此表單,然後獲取該輸入名稱的值並驗證它。如果它是一個很好的價值,什麼都不要做否則阻止提交。

var value = $("input[name='StartTime']").val(); 

現在變量值具有該輸入字段的值。無論你想要什麼,你都可以驗證它。確保它不是空的,寫一個正則表達式來確保它的格式和數字是合理的。你有價值,你可以做任何你想要的東西。天空纔是極限。

我希望有所幫助。