Question

I’m working on a project where when the submit button is clicked, I catch the event and run the form through an external service to check that something is valid.

If there is a problem, I pop a dialog telling the user that there was a problem, and give them the option of overriding to continue on.

The problem is how to trigger the form submit. If I just use .submit(), it send the form into the dialog catch again.

$('#editAddr').submit(function(){
    var checkString = addrString();
    $.getJSON('/validate.php' + checkString, function(data){
        if(data == 0){
            var confw = '';
            confw += '<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>';
            confw += 'Failed validation.</p></div>';

            var $dialog = $(confw).dialog({
                title: "Validation Problem",
                modal: true, resizable: false, width: 500,
                buttons: {
                    "Edit": function(){
                        $(this).dialog('close');
                    },
                    "Override": function(){
                        $(this).dialog('close');
                        $('#editAddr').submit();
                    }
                }
            });
        }else{
            $('#editAddr').submit();            
        }
    });

    return false;
});

How can I submit this form properly through the dialog button click?

EDIT: Make sure your form does not include a button with the id=”submit”, or you will break the jQuery .submit()

Answer 1

Instead of binding to the submit event of your form, bind to the click event of the submit button instead. This way you can catch the click event of the submit event and return false when you need to, or proceed with the submit() event on the form.

​$('input[type="submit"]').click(function(e){
    e.preventDefault();
    if() // invalid data
    {

    }
    else // good to go
    {
        $('form').submit();
    }
})​

This solution will also degrade nicely if someone disabled JavaScript. Some of the other solutions I’ve read won’t allow this.