jQuery Form plugin not submitting while using it with the jQuery Validation plugin

Question

I have a simple form and I use the jQuery Validation plugin and jQuery Form plugin to process the form.

The validation works with no problem but the form plugin not submitting .
it doesn't show issues with the console and not even shows any ajax calls sent from the script.

$("#creatUser").validate({
                rules: {
                    firstname: {
                        required: true
                    }, 
                                        lastname: {
                        required: true
                    }, 
                    email: {
                        required: true, 
                        email: true
                    }, 
                    username: {
                        required: true
                    }, 
                    password: {
                        required: true, 
                        minlength: 5
                    },
                                        cpassword: {
                        required: true, 
                        minlength: 5, 
                        equalTo: '#password'
                    } 
                },

                invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        var message = errors == 1
                        ? 'You missed 1 field. It has been highlighted'
                        : 'You missed ' + errors + ' fields. They have been highlighted';
                        $("#da-ex-val1-error").html(message).show();
                    } else {
                        $("#da-ex-val1-error").hide();
                    }
                },
                                submitHandler: function(form) {
                                     var options = { 
                                           target: '#da-ex-val1-error',  
                                           success: function() { 
                                                alert('Thanks for your comment!'); 
                                            },
                                           url: 'php.php',
                                           type: 'POST'
                                       }; 

                                       // bind form using 'ajaxForm' 
                                       $('#creatUser').ajaxForm(options); 
                            }
            });

Can you please show enough code to construct a complete demo? Where is the HTML markup? — Sparky
– Sparky, Commented Aug 7, 2013 at 16:13

Sparky · Accepted Answer · 2013-08-07 16:34:29Z

You seem to be confusing the functional operation with the initialization of the plugin.

Move the .ajaxForm() method out so that it's a sibling of the .validate() method...

$(document).ready(function() {

    $("#creatUser").validate(...);  // initialize jQuery Validate plugin

    $('#creatUser').ajaxForm(...);  // initialize Ajax Form plugin

});

Then properly leverage the callback functions within...

1) Put only a return false in the submitHandler callback within the .validate() method.

$("#creatUser").validate({
    // your other options,
    submitHandler: function(form) {
        return false;  // block submit since another plugin is handling this
    }
});

2) .valid() is a method from the jQuery Validate plugin that you can call to check the form's validity and get a boolean result.

3) Use .valid() along with the beforeSubmit callback function within the .ajaxForm() method.

$('#creatUser').ajaxForm({
    // your other options,
    beforeSubmit:  function() {
        if $('#creatUser').valid() {  // check validity using jQuery Validate
            return true;  // proceed if valid
        } else {
            return false; // stop if not valid
        }
    }
})

See: http://malsup.com/jquery/form/#validation

Collectives™ on Stack Overflow

jQuery Form plugin not submitting while using it with the jQuery Validation plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related