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 🙂
InformationsquelleAutor marcamillion | 2011-01-05
Schreibe einen Kommentar