從引導formhelpers驗證引導日期選擇器

是否可以使用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/

來源

2015-12-11 Khrys

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

已經更新了小提琴：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"); 
        } 
       }); 
      });

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

這是你所需要的？

來源

2015-12-14 12:56:49 Sanchit

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

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

它不是在'輸入'它是在一個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"); 
         } 
        }); 
       });

來源

2016-03-10 06:02:30

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

根據你的代碼看起來輸入元素不處於活動狀態，所以我們不得不將其激活時首先亮點功能是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/

來源

2016-10-02 00:07:59 breakit

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

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

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

來源

2017-02-08 13:56:06

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

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

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

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

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

我希望有所幫助。

來源

2017-07-21 22:50:02 Marc

從引導formhelpers驗證引導日期選擇器

回答

相關問題