Validieren von Bootstrap-Datumsauswahl von Bootstrap-Formhelfern

Question

Ist es möglich, die JQuery-Validierung zu verwenden, um den Bootstrap-Datepicker zu validieren? Da das Feld input nicht verfügbar ist, kann ich es nicht validieren.

Beispiel: 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"); 
     } 
    }); 
}); 

---

Update:

Klasse btn-danger Bedürfnisse richtig auf das Element angewendet werden.

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

Answer 1

Haben die Geige aktualisiert: 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"); 
        } 
       }); 
      }); 

die picker Set erforderlich werden.

War das, was Sie brauchten?

Answer 2

Sie können Javascript nicht zur Validierung verwenden. Verwenden Sie jquery. versuchen Sie das.

$.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"); 
         } 
        }); 
       }); 

Answer 3

Code Nach scheint es, dass das Eingangselement ist in einem aktiven Zustand nicht, so dass wir es zuerst aktiv machen müssen, wenn die Highlight-Funktion ist called.So wir eine aktive Klasse hinzufügen können, um es zu aktivieren erstes gilt dann btn-danger Klasse. So sollte Ihr Code wie sein

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"); 
     } 

Aktualisiert Geige ist: https://jsfiddle.net/anulesh91/2rcr9j5s/10/

Answer 4

Ihr Update Geige: https://jsfiddle.net/2rcr9j5s/4/

ist absolut in Ordnung und jQuery-Validator ist es nur becasue von BTN-Gefahrenklasse Validierung der Text innerhalb Eingabefeld ist weiß. Sie müssen nur

color: black; zu diesem Eingabefeld hinzufügen und Rest des Codes funktioniert gut.

Answer 5

Ich habe dieses Plugin nie benutzt, aber ich habe einen kurzen Blick auf die Dokumentation geworfen und es gibt eine Möglichkeit, HTML und das Javascript zu schreiben, so dass Sie die Möglichkeit haben, ein eigenes Eingabefeld zu erstellen. Ich werde jedoch versuchen, Ihre Frage so zu beantworten, wie sie ist, so dass Sie nicht viel Zeit darauf verwenden, den Code zu verschieben.

Um Ihre Frage zu beantworten, wenn Sie Element in Ihrem Browser überprüfen, sehen Sie, dass der Eingangsname "StartTime" ist.

So alles, was Sie wirklich tun müssen, ist auf Senden dieses Formulars erhalten Sie den Wert für diesen Namen und bestätigen Sie es. Wenn es ein guter Wert ist, tue nichts. sonst verhindere das absenden.

Jetzt hat der Variablenwert den Wert für dieses Eingabefeld. Sie können es wie gewünscht validieren. Stellen Sie sicher, dass es nicht leer ist, schreiben Sie einen regulären Ausdruck, um sicherzustellen, dass das Format und die Zahlen sinnvoll sind. Sie haben den Wert, den Sie damit machen können, was Sie wollen. Der Himmel ist die Grenze.

Ich hoffe, dass das geholfen hat.