.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

Answer 1

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