jQuery Form Validierung auf Knopf klicken

Ich habe eine einfache Seite mit einem Formular und einer Schaltfläche außerhalb des Formulars. Ich versuche, das Formular beim Klicken auf die Schaltfläche zu bestätigen. Ich habe die Regeln für die Validierung des Formulars in der Funktion document.onready hinzugefügt. Das Formular wird jedoch nicht validiert.jQuery Form Validierung auf Knopf klicken

HTML: -

<html> 
<head> 
    <script src="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 
}); 

});

Jede Idee, was falsch ist?

Quelle

2012-12-02 ajithmanmu

Erhalten Sie einen JavaScript-Fehler? –

Nein, es gibt keinen JS-Fehler. – ajithmanmu

Welches Plugin verwendest du zur Validierung? – WebweaverD

Innerhalb Ihres click Handlers ist der Fehler die .validate() Methode; es initialisiert nur das Plugin, es validiert nicht die form.

die Notwendigkeit zu beseitigen eine submit Taste innerhalb des form zu haben, .valid() verwenden, um eine Validierungsprüfung auslösen ...

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

jsFiddle Demo

.validate() - das Plugin initialisiert werden (mit Optionen) einmal auf DOM bereit.

.valid() - um den Validierungsstatus (boolescher Wert) zu überprüfen oder jederzeit einen Validierungstest für den form auszulösen.

Andernfalls, wenn Sie eine type="submit" Taste innerhalb des form Behälters haben, würden Sie nicht einen speziellen click Handler benötigen und die .valid() Methode, wie das Plugin, das automatisch erfassen würde.

Demo without click handler

EDIT:

Sie haben auch zwei Probleme in Ihrem HTML ...

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

Sie brauchen nicht class="required" bei der Deklaration Regeln innerhalb .validate(). Es ist überflüssig und überflüssig.
Das Attribut name fehlt. Regeln werden innerhalb durch ihre name erklärt. Das Plugin hängt von eindeutigen name Attributen ab, um die Eingaben zu verfolgen.

sein sollte ...

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

Quelle

2012-12-02 17:34:37 Sparky

Danke !! .. es hat funktioniert .. – ajithmanmu

Gern geschehen. – Sparky

Ich habe Ihre Antwort bearbeitet, damit sie für eine andere Art von Formularstruktur funktioniert. http://stackoverflow.com/a/28723145/2615737 –

$(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 sind auch type = "button" verwenden. Und ich bin nicht sicher, warum Sie den Absenden-Knopf trennen sollten, legen Sie es innerhalb des Formulars. Es ist richtiger, es so zu machen. Das sollte funktionieren.

Quelle

2012-12-02 17:45:11 Wap

Wahr. Aber könnte ich wenigstens meine Stimme zurückbekommen? Haha Nur ein trivialer Fehler und ein Versehen meinerseits. ; p ... Ich habe nie gesagt, dass es falsch ist, ich habe nur gesagt, dass es sauberer ist. Allgemein gesagt. – Wap

Warum immer Fehler finden? Ich habe einfach versucht zu helfen, indem ich eine funktionierende Alternative gebe, so schnell ich kann, damit er sie nutzen kann, wenn sich herausstellt, dass es genau das ist, wonach er sucht. Es ist nicht so, als würde ich trollen. Der Austausch von Kommentaren ist ein langer Prozess, weißt du? Schau besser auf die helle Seite, Mann. – Wap

SO ist über Qualität Antworten auf spezifische Fragen ... nicht mehr und nicht weniger. – Sparky

jQuery Form Validierung auf Knopf klicken

Antwort

Verwandte Themen