How do I do client-side form validation in jQuery?

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 name@domain.com"
        }
    }
})

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 name@domain.com"
        }
    }
});

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

Try this:

$('#user_new').validate({
    rules: {
        user_l_name: "required",
        user_email: {
            required: true,
            email: true
        }
    },
    messages: {
        user_l_name: "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 name@domain.com"
        }
    }
})

Please make sure that the variables that you use in rules and Massage are the same as your input Id's and Name. What I'm trying to say is that your input Id and Name must be same for this to work.

I had the same problem, if this doesn't work, let me know so I can assist further.

Happy coding!!!!

Answer 2

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 name@domain.com"
        }
    }
});

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

Answer 3

Please check this site http://bassistance.de/jquery-plugins/jquery-plugin-validation. they have couple of example regarding JQuery validation.

Hope It helps...

Happy Coding!!!