Why this code not show any validation error in html page after button click

Question

jQuery validation is not working in the code I have used to validate the form.

I used PureMVC and in the index.html file the contact.html file loaded from ajax request. If I make a javascript alert on the button click then I can see them but they not make any validation on the click of button

$("#contactUsSubmit").live('click', function() {

                $("#contactForm").validate({
                    errorLabelContainer: $("#contactAlert ul"),
                    rules: {
                        contactName: {
                            required: true,
                            minlength: 6
                        }
                    }
                });

            });

Do someone know what kind of thing I have done wrong in this code. #contactname is Id of contactName

Answer 1

I think it is not working for you probably because you must have name elements on your form fields. Looking at this PUREMVC example it doesn't have names for the field elements.

EDIT url pasted below as the editor had problems with it

There is no reason why this code wouldn't work, note you will have to call valid() to see any error messages immediately.

$("#contactUsSubmit").live('click', function() {

    $("#contactForm").validate({
        errorLabelContainer: $("#contactAlert ul"),
        rules: {
            contactName: {
                required: true,
                minlength: 6
            }
        }
    });
    // call valid to see errors
    $("#contactForm").valid();

});

Pure Mvc example http://darkstar.puremvc.org/content_header.html?url=http://puremvc.org/pages/demos/TS/PureMVC_TS_Demo_EmployeeAdmin&desc=PureMVC%20TypeScript%20Demo:%20Employee%20Admin

Answer 2

So the live('click', (...) function is called properly? JQuery 1.9 removed the .live function.

Answer 3

Your code:

$("#contactUsSubmit").live('click', function() {
    $("#contactForm").validate({
        //options,
        ...
    });
});

You shouldn't implement it like that. You are merely initializing the plugin on every click. Validation will not occur until after the first click initializes the plugin (then the second click will validate). The plugin already has the click event handler built-in and it's captured automatically.

.validate() should be called once within the DOM ready to initialize the plugin.

$(document).ready(function() {

    $("#contactForm").validate({
        //options,
        rules: {
            contactName: {
                required: true,
                minlength: 6
            }
        }
    });

});

Note that the name attribute is mandatory for all input elements:

<form id="contactForm">
    <input type="text" name="contactName" id="contactName"/>
    <input id="contactUsSubmit" type="submit" />
</form>

Play with a demo of your form: http://jsfiddle.net/FfJCV/