Jquery validate submitHandler is not getting called

Question

I have a form with two buttons

a) Test - on click of the button a javascript function is called to verify a couple of credentials.

b) Create - on click of the button a javascript function is called to save the form. @Messages("playauthenticate.project.create")

I have a form tag around these two submit buttons with no action.

name, description, accessKey and secretKey are the four fields in the form.

on clicking on the create button, I want to perform jquery validation and then submit the form but the jquery validation submitHandler is not getting called in the javascript function and there are no errors in the Error Console.

When I click on the create button, the create alert is shown and then the form resets and I am able to see all the parameters entered in the URL.

$("create").click(function() {

        alert("create ");

        $('#projectForm').validate( { 
                rules: {
                    name: {
                        minlength: 6,
                        required: true
                    },
                    description: {
                        required: true,
                        description: true
                    },
                    accessKey: {
                        minlength: 10,
                        required: true
                    },
                    secretKey: {
                        minlength: 15,
                        required: true
                    }
                  },
                  focusCleanup: false,

                wrapper: 'div',
                errorElement: 'span',

                highlight: function(element) {
                    $(element).parents ('.control-group').removeClass ('success').addClass('error');
                },
                success: function(element) {
                    $(element).parents ('.control-group').removeClass ('error').addClass('success');
                    $(element).parents ('.controls:not(:has(.clean))').find ('div:last').before ('<div class="clean"></div>');
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.parents ('.controls'));
                },
                   submitHandler: function() {

                       alert("hello");

                       var name = $('#name').val();
                       var description = $('#description').val();
                       var accessKey = $('#accessKey').val();
                       var secretKey = $('#secretKey').val();

                        var dataString = 'name='+ name + '&description=' + description + '&accessKey=' + accessKey+ '&secretKey=' + secretKey;
                        //alert(dataString);

                        $.ajax({
                          type: "POST",
                          url: "/demo/save",
                          data: dataString,
                          success: function(data) {
                            $('#result').html("<h2>demo created successfully!</h2>");
                           },
                            error: function(data) {
                                $("#result").html("<h2>Error!</h2>");
                            }
                        }) 

                    }
        });
     });

JSfiddle - http://jsfiddle.net/NJxh5/3/ Thank you

Answer 1

.validate() is the method for initializing the plugin. It's not a method of testing the form. Testing is automatic.

Therefore, get rid of the click handler. The click event is captured automatically by the plugin. If the form is valid, the submitHandler will fire.

Otherwise, you are doing it properly by placing your ajax inside the submitHandler callback.

$(document).ready(function () {

    $('#projectForm').validate({ // initialize the plugin
        // rules & options
        submitHandler: function(form) {
            // ajax method
        }
    });

});

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

---

With two different buttons and actions:

HTML:

<form id="projectForm">
    ....
    <input type="button" class="button" value="TEST" id="test" />
    <input type="button" class="button" value="Create" id="create" />
</form>

jQuery:

$(document).ready(function () {

    $('.button').each(function () {
        $(this).on('click', function () {
            var action;
            if ($(this).attr('id') == "test") {
                action = 'test.php';
            } else {
                action = 'create.php';
            }
            $('#projectForm').submit();
        });
    });

    $('#projectForm').validate({ // initialize the plugin
        // rules & options
        submitHandler: function(form) {
            // ajax method
            $.ajax({
                url: action, // determined from click handler above
                // ajax options
            });      
        }
    });

});