Onclick Validierungsformular, wenn gültig nur Formular senden

Ich habe ein HTML-Formular, das ich zuerst validieren möchte mit jQuery Validierungsbibliothek jquery.validate.min.js und , wenn Formular gültig ist, senden Sie das Formular an einen Speicherort.Onclick Validierungsformular, wenn gültig nur Formular senden

<html> 
    <head> 
     <link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css"> 
     <script src="../../common/view/js/jquery.js"></script> 
     <script src="../../common/view/js/bootstrap.min.js"></script> 
     <script src="../../common/view/js/jquery.validate.min.js"></script> 

    </head> 

    <body> 
     <form method="post" action="stock-c.php" id="issueform" name="issueform"> 
      <input type="text" name="pid"/> 
      <input type="button" name="button1" id="button1"/> 
      <script type="text/javascript" src="js/issueValidation.js"></script> 

      <!--Modal-->    
      <div id="myModal" class="modal fade" role="dialog"> 
       <div class="modal-dialog"> 
        <!--info to be displayed--> 
        <input type="submit" value="submit"/> <!--Explain1--> 
       </div> 
      </div> 


     </from> 
    </body> 
</html>

issueValidation.js

$(document).ready(function() {   
$validator= $("#issueform").validate({ 
     rules: { 
       pid: "required", 
     }, 
     messages: { 
       pid: "Please enter a value", 
     }, 
     errorElement: "em", 
     errorPlacement: function (error, element) { 
       // Add the `help-block` class to the error element 
       error.addClass("help-block"); 

       if (element.prop("type") === "checkbox") { 
         error.insertAfter(element.parent("label")); 
       } else { 
         error.insertAfter(element); 
       } 
     }, 
     highlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success"); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error"); 
     } 
}); 

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
}); 

});

Explain1:

Ich habe folgendes versucht ich meine Submit-Button in der modalen Klasse platziert, die innerhalb der Form-Tags ist, so dass, wenn Klicken Sie auf die Formulardaten wird gesendet.

Idealerweise möchte ich die Einreichung anhalten, bis das Formular validiert ist. Wenn das Formular gültig ist, muss ich in der Lage sein, meine Formulardaten im Modal zu überprüfen und auf den Absendeknopf darauf zu klicken, wodurch das Senden erfolgt.

Ich habe versucht mit der SubmitHandler in jQuery Validierung Plugin (die nur ausgeführt wird, wenn keine Invaliden in der Form sind) das modal zu initialisieren, aber dazu muss ich Eingabe [type = "button"] zur Eingabe ändern [ type = "submit"], da der Handler nur auf dem Submit-Button arbeitet. Dann habe ich am Ende zwei Sende-Buttons im selben Formular und das Formular wird nicht korrekt gesendet.

Bitte helfen Sie mir, dieses Problem zu beheben. Zur Erinnerung: Ich muss die in einem Formular eingegebenen Daten validieren und eine Bestätigung vom Benutzer in einem Modal anfordern. Wenn der Benutzer in modal bestätigt, werden die Daten im Formular übermittelt. Wenn meine Methode eine unnötige Methode ist, um dieses Ergebnis zu erreichen, sind auch alternative Vorschläge willkommen, solange sie der oben genannten Anforderung entsprechen. Danke.

Quelle

2016-07-20 user3889963

Idealerweise möchte ich die Einreichung anhalten, bis das Formular validiert ist.

Das ist, was das jQuery Validate Plugin bereits macht.

Ihr Code ...

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
});

As per docs, kehrt .valid() auch einen boolean, so dass die Click-Handler Teil des Codes oben stark vereinfacht werden kann ...

$('#button1').on('click', function() { 
    if ($("#issueform").valid()) { 
     // do something here when the form is valid 
     $('#myModal').modal('toggle'); 
    } 
});

Ich weiß, Sie bereits erwähnt, aber das folgende ist für zukünftige Leser:

Bitte beachten Sie, dass Ihre click Handler ist nur erforderlich, weil die input eine type="button" ist.

Wenn Sie type="submit" verwenden, wird Ihr click-Handler nicht benötigt, da der Klick automatisch vom Plug-In erfasst wird. In diesem Fall würden Sie auch the submitHandler option verwenden, um Code zu enthalten, der ausgeführt wird, wenn das Formular gültig ist.

Quelle

2016-07-20 14:46:22 Sparky

Schön und einfach ... :-) Ich kann nicht glauben, dass ich diese Rückkehr in den Dokumenten verpasst habe. Danke vielmals... – user3889963

Onclick Validierungsformular, wenn gültig nur Formular senden

Antwort

Verwandte Themen