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

@BasicBridge I have tried it and it's will not work because form is not on my page. i use live because puremvc load it from another html page. #concept — user1978003, Feb 20 '13 at 11:30

score 0 · Answer 1 · answered Feb 20 '13 at 11:15

0

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

answered Feb 20 '13 at 11:15

Imperative

3,138
2
25
40

sorry I use jquery 1.7.2. as I have told I can see javascript click so I am sure the validator function called because I also see them in console.log but not see them working – user1978003 Feb 20 '13 at 11:17

Sparky · Answer 2 · 2013-02-20T17:14:16.003

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/

score -1 · Accepted Answer · edited May 23 '17 at 10:24

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

It may work, but why initialize the plugin inside a click handler? Also, the plugin already has the click event handler built in. — Sparky, Feb 20 '13 at 16:56
I agree, this is the wrong way to do it. user1978003 look at @Sparky's answer for the correct way to initialize the plugin but also check you have names on your input and selects elements — politus, Feb 20 '13 at 17:03

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

3 Answers3