Question

I am using bassistance.de’s Validation jQuery plugin to validate a form #signup-form. Instead of submitting the form data directly to the server the usual way, the form data should be submitted AJAX’ly via $.post().

JS Code

// Validate form
$('.signup-form').validate({
    rules: {
        signupName: { required: true, minlength: 3 }
    }
});


// Submit to Serverside
$('#submit-btn').click(function() {
    $.post('/api/register_user',
        $('#signup-modal .signup-form').serialize(),
        success: function() {
            console.log('posted!');
        }
    );
});

Problem: If a user entered data that does not pass the jquery validation, the click handler on #submit-btn will still allow the form to be submitted! Is there a way to check that there are no validation errors?

Answer 1

Try this:

// Validate form
$('.signup-form').validate({
    rules: {
    signupName: { required: true, minlength: 3 }
   }
});


// Submit to Serverside
$('#submit-btn').click(function() {
    if ($('.signup-form').valid()) {
        $.post('/api/register_user',
            $('#signup-modal .signup-form').serialize(),
            success: function() {
                console.log('posted!');
            }
        );
     }
});