Question

I have a form, with a text input and a submit button.

On submit, I want to hit the server first to see if the input is valid, then based on the response either show an error message or if valid, continue with the form submit.

Here is what I have:

$('#new_user').submit(function(e) { 
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "/users/stuff",
        data: $('#new_user').serialize(),
        success: function(data){
            if (data.valid) {
                return true
            } else {
                // Show error message
                return false;
                e.preventDefault();
            }
        }
    });
});

Problem is the form is always submitting, given the use case, what’s the right way to implement? Thanks

Answer 1

Try like this:

$('#new_user').submit(function(e) { 
    var $form = $(this);

    // we send an AJAX request to verify something
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "/users/stuff",
        data: $form.serialize(),
        success: function(data){
            if (data.valid) {
                // if the server said OK we trigger the form submission
                // note that this will no longer call the .submit handler
                // and cause infinite recursion
                $form[0].submit();
            } else {
                // Show error message
                alert('oops an error');
            }
        }
    });

    // we always cancel the submission of the form
    return false;
});