How to trigger a send event before a blur event is triggered?

Question

I have a form that has an error message, as shown in the example below:

http://codepen.io/anon/pen/dYWyEM?editors=101

The steps to reproduce the problem are as follows:

After opening the codepen link,

1) Focus in the input field

2) Click submit

3) Since the blur event is triggered first, the error message is first hidden, so the position of the submit button changes. So the click event is not logged at all, and I need another click to submit the form.

Is there a way to send a dispatch event first?

Somehow I need to define a target that fires a blur event. It seems relatedTargetto allow us to figure out the element that caused the blur event. However, this does not work in Firefox.

Is there a way to define an associated Target in all browsers?

Answer 1

If you intend to perform field validation during blurring, you still need to check if there are any validation errors when submitting the form so that you do not submit the form if there are validation errors.

So I suggest an alternative approach instead of a workaround / fix for your specific problem, because I think the current model might be problematic to start with.

, , - ?

Answer 2

, , solutio. mousedown, blur, , .

form.on('mousedown','input[type="submit"]', function(e) {
  if(!errorMsg.hasClass("hidden")){
    e.preventDefault();
    alert("Can't submit until the error message is gone");
  }
});

CodePen.