Wie mache ich client-side form validation in jQuery?
Ich versuche, mit diesem plugin: http://docs.jquery.com/Plugins/Validation
Wobei #user_new ist die id für meine form, dies ist, was mein code sieht wie folgt aus:
$('#user_new').validate({
rules: {
user[username]: "required",
user[email]: {
required: true,
email: true
}
},
messages: {
user[username]: "Please specify your name",
user[email]: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of [email protected]"
}
}
})
Wo diese sind, wie meine input-Felder Aussehen, wenn die Seite gerendert wird (erzeugt durch Schienen):
<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br />
<input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br />
<input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br />
<input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br />
Ich war gerade versucht zu validieren username & E-Mail zuerst. Dann nehmen Sie es von dort.
Für das Leben von mir, ich kann nicht herausfinden, wie Sie angeben, die syntax und die Regeln für das arbeiten mit diesem plugin.
Hilfe!
Edit1: Hier ist der HTML-Ausgabe für den form-tag:
<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post">
Als für die Frage zu Debuggen, wenn ich es so auf:
$('#user_new').validate({
debug: true,
rules: {
user_username: "required",
user_email: {
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name",
user_email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of [email protected]"
}
}
});
Sehe ich nichts in meinem JS-Konsole.
Edit2: Wenn ich klar meine login-Felder Daten ein und klicken Sie auf submit, wird es nicht reichen. Nicht sicher, ob dies etwas zu tun mit der validate () - Funktion tatsächlich funktioniert. Aber ich sehe keine Nachrichten, pop-up oder so etwas.
Edit3: Es scheint, dass das problem sein könnte, eine Trennung zwischen dem ID & name-Felder unterschiedlich benannt. Allerdings Schienen vergibt den Namen und ID in beide Felder - also nicht sicher, wie man dieses Problem beheben.
Edit4: ich habe eine Lösung gefunden. Ich habe es auf einem Kommentar unter der gewählten Antwort.
- was innerhalb der validate-Methode statt?
- Kommentare Bearbeiten: versuchen Sie, ein container direkt nach dem input-tag, ich meine, fügen Sie diese innerhalb der validate-Methode: errorPlacement: function(error, element){error.appendTo(element.next());}
- btw wo muss ich setzen, dass
errorPlacement
code ? Sollte es nach der zweiten}
nach Nachrichten ? oder sollte ich nehmen Sie die Regeln zusammen und dann fügen Sie es ? - legen Sie es im inneren zu: $('#user_new').validate({ }); nach den Regeln, und ich aktualisierte meine Antwort 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
ich denke, es ist, weil der Wert des "name" - Attribut in der form (input-tag) nicht mit dem jquery-validate-option
Edit: werfen Sie einen Blick auf diese Frage, ich denke, er hat das gleiche problem wie du jquery.überprüfen Sie in cakePHP
Edit2: Bearbeiten Sie die Weise, die es anzuzeigen, setzen Sie einen container direkt nach dem input-tag, lassen Sie sagen,
hinzufügen dieses codes:
und dann gelten einige css ordentlich auf die Dinge
oder können Sie immer überprüfen, die Dokumentation für weitere Modifikationen
rules {"user[username]" : "required", "user[email]" : { required: true, email true } }
WOW...ich bin SOOO froh, dass ich fand diese Lösung. Dies wurde nervt mich. Ich kann Ihnen nicht genug danken. Wenn Sie möchten, Bearbeiten Sie Ihre Antwort zu dieser änderung, ich denke, der nächste Frustrierte person wird es Ihnen danken 🙂<input id="blah" name="blah" type="text" /><div id="error_messages"></div>
?Versuchen Sie dies:
Bitte stellen Sie sicher, dass die Variablen, die Sie in den Regeln verwenden und Massage sind identisch zu Ihrem input Id ' s und Namen. Was ich versuche zu sagen ist, dass Ihr input Id und Name müssen identisch sein, damit dies funktioniert.
Ich hatte das gleiche problem, wenn dies nicht funktioniert, lassen Sie mich wissen, so kann ich weiterhelfen.
Happy coding!!!!
<%= f.text_field :f_name, :value => "First Name", :class => "clearField curved" %><br />
produziert:<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br />
Irgendwelche Gedanken an, wie kann ich das ändern?Nicht genau sicher, warum die oben genannten nicht die Arbeit mich. Vielleicht jemand anderes kann es erkennen... Aber in der Zwischenzeit werfen Sie einen Blick auf die debug-option in den docs. Was bekommen Sie, wenn Sie diese option aktivieren?
Bitte prüfen Sie diese Seite http://bassistance.de/jquery-plugins/jquery-plugin-validation. Sie haben paar Beispiel über JQuery Validierung.
Hoffe, Es hilft...
Happy Coding!!!