Question

I’d like a hint to solve a problem I’ve been experiencing, I have two functions, the first validates the form and the second is the post to a PHP file.

The problem is that the form is being sent before being validated. I wonder if it is possible to combine these two functions, ie, validate first and only if everything is correct to the form submission. Anyone know how?

Validation Function

$(document).ready(function() {

$('#singup-form').validate(
        {
            rules: {
                user_name: {
                    minlength: 3,
                    required: true
                },
                user_email: {
                    required: true,
                    email: true
                },
                user_password: {
                    required: true

                },
                confirmation_password: {
                    required: true,
                    equalTo: '#user_password'
                },
                user_phone: {
                    number: true,
                    minlength: 8
                },
                user_twitter: {
                    minlength: 3
                },
                agree: {
                    required: true
                }
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function(label) {
                label
                        .text('OK!').addClass('valid')
                        .closest('.control-group').removeClass('error').addClass('success');

            }
        });
}); // end document.ready

function post

$('#singup-form-submit').click(function(e) {
$.post("register", {
    user_name: $('#user_name').val(),
    user_email: $('#user_email').val(),
    user_password: $('#user_password').val(),
    confirmation_password: $('#confirmation_password').val(),
    user_ddd: $('#user_ddd').val(),
    user_phone: $('#user_phone').val(),
    user_twitter: $('#user_twitter').val(),
    agree: $('#agree').val()
}, function(data) {

    $('#resultado').html(data);
});
e.preventDefault();
});

Answer 1

This is how you would combine your two functions (of course, assuming your two functions are already operating correctly). Nothing inside of the submitHandler fires until the form is valid. As per documentation, this is where you’d put any ajax functionality.

Use the built-in submitHandler: as follows.

$(document).ready(function() {

    $('#singup-form').validate({
        rules: {
            user_name: {
                minlength: 3,
                required: true
            },
            user_email: {
                required: true,
                email: true
            },
            user_password: {
                required: true
            },
            confirmation_password: {
                required: true,
                equalTo: '#user_password'
            },
            user_phone: {
                number: true,
                minlength: 8
            },
            user_twitter: {
                minlength: 3
            },
            agree: {
                required: true
            }
        },
        highlight: function (label) {
            $(label).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (label) {
            label.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            $.post("register", {
                user_name: $('#user_name').val(),
                user_email: $('#user_email').val(),
                user_password: $('#user_password').val(),
                confirmation_password: $('#confirmation_password').val(),
                user_ddd: $('#user_ddd').val(),
                user_phone: $('#user_phone').val(),
                user_twitter: $('#user_twitter').val(),
                agree: $('#agree').val()
            }, function(data) {
                $('#resultado').html(data);
            });
        }
    });

}); // end document.ready

See documentation:

http://docs.jquery.com/Plugins/Validation/validate#toptions

submitHandler, Callback, Default: default (native) form submit
Callback for handling the actual submit when the form is valid. Gets
the form as the only argument. Replaces the default submit. The right
place to submit a form via Ajax after it validated.