How to prevent blur event before click event in twitter bootstrap 3.1 modal dialog when user clicks outside of it.!

Question

I am using twitterbootstrap 3.1.0 and i have a modal.I want the modal to be hidden whenever user clicks outside the modal (so i have used data-backdrop="true" and is working fine.)

And my modal dialog has a focused input element having field validation and that input box will be focused whenever modal dialog is shown.On blur of that input box,validation takes place and throws error accordingly.(i want this logic to remain same).!!

MY PROBLEM is whenever user clicks outside the modal dialog,it disappears showing a error message (field validation for input field).As blur event fired before click , it shows error message and then modal dialog disappears.

I dont want the field validation message to be displayed before hiding modal dialog.

Please HELP ! THANKS A TON IN ADVANCE.

Answer 1

Blur fires before click and you cannot change that. My suggestion would be to move the validation away from blur on to a button click(I am guessing you must be having a Ok or a Submit button). This will resolve your issue.

I also some hacks(I would recommend against it). Since you are having this issue, I assume your modal hides using animation

1. Hide modal without using animation. The message will still be there, but you wont get the time to see it.

2. If you want and know the animation time, you can use a setTimeout after that time to check whether the modal is still visible. If yes, show the error message else dont.

Say modal takes 1 second to disappear, you can try something like this

// Inside blur callback function

setTimout(function(){
    if($("#modal").is(":visible")) {
        // show error message
    }
},1100); //1.1 seconds

I will still prefer to move the validation away from blur in your scenario :)