jQuery Validation Plugin

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

May be this will help, I wrote my own plug-in for jQuery cause of I need some flexibility in patterns. https://github.com/KirShur/ValidolRepo

Answer 2

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.

Answer 3

You can use a submit handler instead of just binding the submit code to the click event.

Plugins/Validation/validate

Use submitHandler to implement your own form submit, eg. via Ajax.

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});