Javascript: on blur getting the event's relatedTarget on mobile safari

Question

So, I have a form with custom validation that is triggered on input blur event...

works fine

the form submit prevents the form to be submitted if there are validation errors on the page...

effectively what that means is if there is an erroneous message and it's focused.... if you click submit button, first the element's blur is triggered and the submit... but coz the element is

in practice I would have to click submit twice.... first time to re-validate the element and second to trigger submit again...(when all the elements are valid)

so on blur, I do

if ( event.relatedTarget && event.relatedTarget.type === "submit" ) {
...
}

and check if the instigator (of element's blur event) is the submit button...if yes, I skip the validation and trigger submit directly.... (that handles validation itself)..

It works perfectly, even in OSX...

the problem is mobile safari... that simply doesn't populate the event.relatedTarget... (is always null on submit click.... it's populated only on some other element's focus)....

how can I get the instigator on iOS?

Answer 1

I had the same problem where I had to hit the submit button on my form twice (on iOS.) Surprisingly I found that this solution worked:

how to prevent blur running

It was not clear at first but using this solution the mousedown event stops my normal blur event from happening but if you click the "Done" on the iOS keyboard it will let the blur event run because there was no mousedown event.