jQuery-Formularvalidierung beim Klicken auf die Schaltfläche

Question 1

Ich habe eine einfache Seite mit einem Formular und einer Schaltfläche außerhalb des Formulars. Ich versuche, das Formular auf dem Button-Klick zu validieren. Ich habe die Regeln für die Validierung des Formulars in der Funktion document.onready hinzugefügt. Das Formular wird jedoch nicht validiert.

HTML:-

<html>
<head>
   <script src="https://stackoverflow.com/questions/13671710/lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS:-

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },
   messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

Irgendeine Idee, was falsch ist?

Question 2

In deinem click Handler, der Fehler ist der .validate() Methode; es initialisiert nur das Plugin, es validiert es nicht form.

Um die Notwendigkeit zu beseitigen, a submit Schaltfläche innerhalb der form, benutzen .valid() um eine Validierungsprüfung auszulösen…

$('#btn').on('click', function() {
    $("#form1").valid();
});

jsFiddle-Demo

.validate() – um das Plugin zu initialisieren (mit Optionen) Einmal auf DOM bereit.

.valid() – Überprüfung des Validierungsstatus (boolescher Wert) oder Auslösen eines Validierungstests auf dem form jederzeit.

Ansonsten, wenn Sie a type="submit" Schaltfläche innerhalb der form Behälter, Sie bräuchten kein spezielles click Handler und die .valid() Methode, da das Plugin das automatisch erfassen würde.

Demo ohne click Handler

BEARBEITEN:

Sie haben auch zwei Probleme in Ihrem HTML …

<input id="field1" type="text" class="required">

Du brauchst nicht class="required" beim Deklarieren von Regeln innerhalb .validate(). Es ist überflüssig und überflüssig.
Der name Attribut fehlt. Darin werden Regeln deklariert .validate() durch ihre name. Das Plugin hängt von unique ab name Attribute, um die Eingaben zu verfolgen.

Sollte sein…

<input name="field1" id="field1" type="text" />

Question 3

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

<form id="form1" name="form1">
     Field 1: <input id="field1" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>

Sie verwenden auch type=”button”. Und ich bin mir nicht sicher, warum Sie die Schaltfläche “Senden” trennen und in das Formular einfügen sollten. Es ist richtiger, es so zu machen. Das sollte funktionieren.

Question 4

Sie können dies auch auf andere Weise erreichen Taste Schild

Entsprechend dem neuen HTML5-Attribut können Sie auch ein Formularattribut wie hinzufügen

<form id="formId">
    <input type="text" name="fname">
</form>

<button id="myButton" form='#formId'>My Awesome Button</button>

Die Schaltfläche wird also an das Formular angehängt.

Dies sollte mit dem validate() Plugin von jQuery wie folgt funktionieren:

var validator = $( "#formId" ).validate();
validator.element( "#myButton" );

Es funktioniert auch mit Eingang Schild

Quelle :

https://developer.mozilla.org/docs/Web/HTML/Element/Button