.valid() only validates first input with jQuery Validation plugin

Question

I'm having a hard time getting the jQuery Validation plugin to work as I want.

What I have is a form with several required inputs, rules as showed below:

$("#makeEvent").validate({
    onfocusout: false,
    rules: {
        name: {
            required: true,
            minLength: 2,
            maxLength: 100
        },
        host: {
            required: true,
            minLength: 2,
            maxLength: 100
        },
        startDate: {
            required: true,
            date: true
        },
        endDate: {
            required: true,
            date: true
        },
        desc: {
            required: true,
            minLength: 10,
            maxLength: 255
        },
        webpage: {
            required: false,
            url: true
        },
        email: {
            required: true,
            email: true
        },
    }
});

Now i have a custom .click() call where I want to validate the form and then show a preview for the user before allowing them to send the form. Please see the function below:

$('#submitPreview').click(function() {
    if($("#makeEvent").valid() === false) {
        //What to do if validation fails
    } else if($("#makeEvent").valid() === true) {
        //Show the preview and let the user either make changes or submit the final result
    }
});

But what happens is that the function only validates the first input (name) and even validates it incorrectly (the rules requires a minimum of 2 characters, still it validates with only 1 character entered. It only return false if no character is added at all).

Maybe my approach isn't the best, so I'm open to any suggestions at all. If you want to have a look at the messy source code you can see the function in action here: http://event.gusthlm.se/make.php

Pat · Accepted Answer · 2010-08-04 16:06:40Z

22

Two problems I can see are that you're not using the name attribute on your input fields and you're using name as one of the IDs (causes all sorts of grief for IE on form submit).

I would suggest adding the name attributes to your input, select and textarea elements and changing "name" to something like "thename":

<label for="thename">Börjar</label>
<input type="text" name="thename" id="thename"/>

answered Aug 4, 2010 at 16:06

Pat

25.7k6 gold badges73 silver badges68 bronze badges

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

6 Comments

Simon Kjellberg Over a year ago

Guess what? This solved the issue. I could never have guessed... Thanks!

computrius Over a year ago

I know this is old but I have an issue where I can not have the name field. I am using Stripe to validate credit cards and to keep the credit card info from hitting our server we have to exclude the name attribute. I am also curious why the name attribute has any bearing on client side validation?

Sparky Over a year ago

@computrius, Because the jQuery Validate plugin requires a name attribute... it's the way the developer has decided the plugin should keep track of the inputs.

Sparky Over a year ago

@computrius, "it's the way the plugin keeps track of the inputs" is from the developer's comments on his Github site. Your non-acceptance doesn't change the fact. If you want to know exactly why the developer decided to chose the name instead of something else, you'll have to ask him... but my guess is because it's much more likely that a form's input element will contain a name than any other attribute used for unique identification.

iOS dev Over a year ago

It should work even when the Ids and names are equal. But, its best practice to have names and Ids different.

|

Collectives™ on Stack Overflow

.valid() only validates first input with jQuery Validation plugin

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related