JQuery Validation is not validating

Question

I'm trying to use the JQuery validator plugin to validate a rails app but it's neither throwing any errors or validating anything. I don't know what else is wrong with my code--any help would be appreciated!

$(document).ready(function() {
$(".theform").validate({
    rules: {
        name: {
            required:true,
            minlength:2,
            maxlength:50
        },
        email: {
            required: true,
            email: true,
            minlength:2,
            maxlength:50
        },
        phone_number: {
            required: true,
            phoneUS: true,
            minlength:9,
            maxlength:20
        }
    },
    messages: {
        name: {
            required: "Please provide your name",
            minlength: "Too few characters!",
            maxlength: "Too many characters!"
        },
        email: {
            required: "Please provide your email",
            email: "Your email address must be in the format of [email protected]",
            minlength: "Too few characters!",
            maxlength: "Too many characters!"
        },
        phone_number: {
            required: "Please provide your phone number",
            phoneUS: "Please provide a valid US phone number",
            minlength: "Too few characters!",
            maxlength: "Too many characters!"
        }
    }
});
$("input#ajax").click(function() {
    $.ajax({
        type: "POST",
        url: "/create_user",
        data: {name: $('#name').val(), email: $('#email').val(), number: $('#phone_number').val(), ajax:"true"},
        success: function(msg){
            //console.log(msg.name);
            $("div#n").html(msg.name);
            $("div#e").html(msg.email);
            $("div#p").html(msg.phone_number);
        }
    });
});
});

EDIT: here's the form I'm trying to validate:

<div id="theform">
<form name="form" action="create" method="post">

    Name: <input type="text" name="name" id="name"/><br/>
    Email: <input type="text" name="email" id="email"/><br/>
    Phone Number: <input type="text" name="phone_number" id="phone_number" /><br/>
    <input type="submit" value="Normal Submit" id="normal">
    <input type="button" value="Ajax Submit" id="ajax">

</form>
</div>

Can you show your generated HTML?

Andrew Whitaker
– Andrew Whitaker

2012-06-25 16:30:05 +00:00
Commented Jun 25, 2012 at 16:30 — Andrew Whitaker
– Andrew Whitaker, Commented Jun 25, 2012 at 16:30
I just did! Check the edit above :)

tkrishnan
– tkrishnan

2012-06-25 16:46:31 +00:00
Commented Jun 25, 2012 at 16:46 — tkrishnan
– tkrishnan, Commented Jun 25, 2012 at 16:46

Andrew Whitaker · Accepted Answer · 2012-06-25 17:04:38Z

1

Your selector is wrong:

$(".theform").validate({ ... });

selects all elements with class theform, which none of your elements have. You need to select the form element itself:

$("#theform > form").validate({ ... });

or

$("form[name='form']").validate({ ... });

Example: http://jsfiddle.net/nQq6t/

answered Jun 25, 2012 at 17:04

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Validation is not validating

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related