Question

I am trying to use this plugin: http://docs.jquery.com/Plugins/Validation

Where #user_new is the id for my form, this is what my code looks like:

$('#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 [e-mail]"
        }
    }
})

Where these are how my input fields look when the page is rendered (generated by Rails):

<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 /> 

I was just trying to validate username & email first. Then take it from there.

For the life of me, I can’t figure out how to specify the syntax and the rules for working with this plugin.

Help!

Edit1: Here is the HTML output for the form tag:

<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post">

As for the question about debug, when I include it like so:

$('#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 [e-mail]"
        }
    }
});

I see nothing in my JS console.

Edit2: When I clear my login fields of data and press submit, it won’t submit. Not sure if this is something to do with the validate() function actually working. But I see no messages pop-up or anything like that.

Edit3: It seems that the problem might be a disconnect between the ID & name fields being named differently. However, Rails assigns the name and ID to both fields – so not sure how to fix this.

Edit4: I found a solution. I added it to a comment under the chosen answer.

Answer 1

i think its because the value of the “name” attribute in the form (the input tag) does not match the jquery validate option

$('#user_new').validate({
    debug: true,
    rules: {
        user_username: "required", // should be: "user[username]"
        user_email: { // should be: "user[email]"
            required: true,
            email: true
        }
    },
    messages: {
        user_username: "Please specify your name", // should be: "user[username]"
        user_email: { // should be: "user[email]"
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of [e-mail]"
        }
    }
});

Edit: take a look at this question, i think he has the same problem as you are jquery.validate in cakePHP

Edit2: to edit the way it display, put a container right after your input tag, let say

<div id="username_error"></div>//for username error message

add this codes:

$('#user_new').validate({
    debug: true,
    rules: {
        //rules
    },
    messages: {
        //messages
    },
    errorPlacement: function(error, element) {
        if ( element.is(":radio") )
            error.appendTo( element.parent().next());//if its a radio button
        else if ( element.is(":checkbox") )
            error.appendTo ( element.next() );//if its a radio button
        else
            error.appendTo( element.parent().next() );
    },//these lines of codes basically telling the jquery.validate plug-in to look for an element after
});

and then apply some css to tidy things up

<style>
#username_error{
   //a little something something
}
</style>

or you can always check the documentation for further modifications