CODEWITHSUNDEEP
jqueryzend-frameworkjquery-validate
Stopper
Stopper

Reputation: 411

JQuery validator not working

I have zend form in my html:

<form action="" method="POST" id="orderForm" class="cmxform">
...
<td valign="top"><br /><label for="cname">Name</label></td><td><?= $this->form->name ?></td><td rowspan="3">
...

My zend form(i set attribute for validator):

...
    ->setAttrib('class', 'required')
    ->setAttrib('id', 'cname');
...

Then i try to call validator(#nextButton - not submit, just button):

$(document).ready(function() {
        $("#nextButton").click(function() {
            $("#orderForm").validate();
        });

My validator don't want to do anything, thanks for any help!

Upvotes: 0

Views: 216

Answers (2)

Sparky
Sparky

Reputation: 98738

Your code:

$(document).ready(function() {
    $("#nextButton").click(function() {
        $("#orderForm").validate();
    });
}); // <- missing ?

Your problem is being caused by a misunderstanding about what .validate() is really doing here for you.

  • .validate() is the initialization for the plugin... it's not the method for testing the form.

  • The validation test is triggered by various events and fully automatic. There is no need for you to capture the click event on the submit button... the plugin does that all by itself.

jQuery:

$(document).ready(function() {

    $("#orderForm").validate(); // initialize the plugin

});

Rendered HTML output:

<form id="orderForm">
    <input type="text" id="cname" name="cname" class="required" />
    <button id="nextButton">next</button>
</form>

Working DEMO: http://jsfiddle.net/NWga4/

Remember, your input fields also need a name attribute for the plugin to function properly.

If you do not wish to submit the form but only "test" the form's validity, use the .valid() method...

$(document).ready(function () {

    $('#orderForm').validate(); // initialize the plugin

    $("#nextButton").click(function(e) {
        e.preventDefault();
        $('#orderForm').valid(); // trigger a test
    });

});

DEMO #2: http://jsfiddle.net/QRdzg/

Upvotes: 1

zaw
zaw

Reputation: 684

so many things that you can use to debug... First check your console if there is any error... Second, in your form action attributes put something like # or javascript:void();

And in your js.. try to put validation code outside click event like so

$('#orderForm').validate({
     rules: {
         name: required
     }
});

$('#nextButton').click(function(e){
     e.preventDefault();
     if( $("#orderForm").valid()){
      $('#orderForm').submit();
     }
});

Upvotes: 1

Related Questions