Question

I have a form that has target="_blank"on submit.

I want to validate the form however, prior to it launching the new window. I could use window.open instead, but then it can be blocked by popup blockers.

The problem I’m having is the validation uses ajax and the time it takes to get the response for return false, is too long and it opens the new window.

 $('.submit').click(function(){
        $.post("/ajax/save/", { state: $('.state_field').val() },
            function(data) {
                if(data == 'false'){
                    alert('invalid state');
                                    return false;
                }else{

                    return true;
                }
            }
        );
  });

Would anyone have suggestions as how I can workaround this?

Thank you!

Answer 1

(You should probably use $("form").submit(function() {}) because that also catches when somebody presses Enter in a textfield.)

What you could do is

1. Don’t include the target="_blank" in the form
2. catch the submission and block it (preferably using event.preventDefault();)
3. do the ajax call for validation
4. from within the callback: add the target="_blank" and submit the form again (you could use a check like $("form[target]").length == 1 to see if the form is being submitted for the second time.

While this all can make it work, you should think about validating the form right after the user enters data in each field, this will also improve the user experience a lot.