jQuery Validierung Plugin Validierung Form auf die Schaltfläche klicken

Question

So habe ich eine siebenteilige Form, wo sechs Registerkarten über CSS versteckt sind und wenn ein Benutzer klickt nächsten ein anderer Teil blendet.

Ich habe die Seite gestellt, um sicherzustellen, die Plugin funktioniert; es ist. Wesentlichen sein Gehen nur auf den nächsten Teil des Formulars ohne Validierung des aktuellen Teil

Als Beispiel

HTML

<form id = "form1" action = "backend.php" method = "post"> 
<label for "phone">First Name </label> 
    <input type = "text" name = "fName" placeholder = "First Name..." class = "required" id = "fName" /> 
<button id = "btn" type = "button" class = "buttonnav next">next</button> 
</form> 

Javascript

$('#btn').click(function() { $("#form1").validate();}); 

Answer 1

Wenn Sie the jQuery Validate verwenden Plugin, mit Ihrem Code wird das Plugin erst nach dem Anklicken der Schaltfläche initialisiert. Wenn das Plugin nicht initialisiert wird, gibt es keine Validierung.

$('#btn').click(function() { $("#form1").validate();}); 

Stattdessen .validate() einmal auf DOM bereit zu aufgerufen wird das Plugin auf dem Formular initialisieren.

Wenn Sie Test das Formular zu jeder Zeit nach der Initialisierung möchten, würden Sie die .valid() method verwenden.

$(document).ready(function() { 

    $('#form1').validate({ // initialize plugin 
     // your options 
    }); 

    $('#btn').click(function() { 
     $("#form1").valid(); // test the form for validity 
    }); 

}); 

---

Ich habe keine Ahnung, wie Sie die einzelnen Teile miteinander oder verwendet, was anderen Code eingerichtet haben zu interagieren wird. Basierend auf Ihrem OP, hier ist ein Arbeitsbeispiel, das meine Antwort oben verwendet.

DEMO: http://jsfiddle.net/pqVJM/

$(document).ready(function() { 

    $('#form1').validate(); 

    $('#btn').click(function() { 
     if ($("#form1").valid()) { 
      alert('hello - valid form'); 
     } 
    }); 

});