I have a form that I create within a Bootbox (itself a layer on top of Bootstrap's modal). Once it is created, I call
$('#myForm').validate()
on it.
The desirable part of the behaviour is that now as the user tabs through the forms, they can see immediate feedback that they've messed up one of the fields. Entered a non-email address before hitting "tab" or clicking elsewhere? Warning and error message. Great!
But the undesirable thing is that the blur eats other events. So, if a user instead chooses to hit "cancel" (knowing full well that the form is invalid), the click on the cancel is not heard and its handler will not fire. A second click (now that the focus is off the form altogether) and cancel fires as expected. I don't want the users to have to click twice.
I saw a technique for disabling the blur altogether, but then the desirable behaviour described above is then lost, which I do not want either. Ideally, a "well, I blurred, but I also know what the user was clicking" is what I'm after.
[EDIT TO ADD:]
It has come to my attention that this is confusing, so let me try a different approach to the question: is it possible to be working on a form (that has had .validate() called on it), then click on any other clickable item on the whole page and have its click handler successfully fire?
[EDIT AGAIN:]
Based on Sparky's demo, I wired up a warning to show below the inputs on blur. So, to see the problem in action, fire up this fiddle: https://jsfiddle.net/bd1fhpu3/
Then click into one of the input fields BEFORE clicking "just a button". Click in an upper sliver of "just a button" to make sure that the warning labels have pushed it out of the cursor's hotspot on release of the mouse button.
Anyhow, this just explains what the problem is. Solving it is probably not within the scope of the question anymore, but it seemed worth sharing in case anybody else comes across this. To solve, I will either need to override Bootbox's click event to be a mousedown event instead of a click (then you don't need to press and release), or I can "Band-Aid"(tm) the solution by avoiding relocating the button. Maybe a static-height dialog that's tall enough to accomodate the form and any possible warnings. Definitely somewhat of a "hack" like this because you just never know if you're going to do other things later that make the problem appear again. But it'd be a quick and easy temp fix.
You cannot use the built in onfocuout function since the JavaScript cannot possibly know the different between focusing out to another field and focusing out to the cancel button.
You'll have to completely disable onfocusout and write some custom event handlers.
Your code is sparse, so my answer will be very generic.
$('#myForm').validate({
// other options here
onfocusout: false; // disable default blur event
});
Then write an event handler that programmatically triggers validation on the form when they focus to an input, and will do nothing when they focus over to anything, like a cancel button.
$('#myForm input').on('focus', function() {
$('#myForm').valid(); // trigger validation on the form
});
However, this will trigger validation on the entire form. If you only want to trigger validation on the one field losing focus, then you're back to square one, because the event only knows focus was lost, not where it's going.
Just for posterity, here's an "answer" such as it is. Maybe it will help somebody SOME day; you just never know.
There is no code that is operating "incorrectly" and therefore there is not really a fix nor code sample to provide. Here's what was happening:
User is in focus in field
User presses mouse button down (but the release action hasn't happened yet)
Blur event fires, which causes form error warnings to appear below the fields. This also had the net effect of pushing the "cancel" button down the Y axis of the screen
User releases the mouse button, which would normally complete the "click" handler.
HOWEVER, in #4, since the "cancel" button is no longer under the cursor, the click event listener bound to the button does not fire.
The demo, for as long as it lives on the internet, will be in a comment below. However, providing a code sample to go with it is pointless. When the demo dies, I will remove the comment.
Possible Steps (workarounds/hacks) that I elected NOT to pursue thus far:
Modify the dialog such that the button does not move when mousedown event fires, meaning the "click" event is completed successfully
Provide custom code that substitutes the mousedown event for the click event on the button. However, this causes a loss of fairly common UI convention
Force user to press ESC to cancel, rather than clicking a button
[credit to Tieson T. via comment] One possible option, if you can use some custom styles on the error messages, is to hide them with visibility: none rather than display: none. The former would hide the text but still reserve the vertical space of the text, which the latter doesn't (hence why your modal is expanding). This would keep the button from possibly shifting during the focusout event. You would wind up with extra whitespace, but you could knock some of that off by removing the bottom margin on the form-group (assuming you're using it)
I'm sure there are other workarounds, but that's a starting point.
I have an issue in IE that is causing my autocomplete list to close when I click on the scrollbar, when the autocomplete element is on a dialog. It works fine for my other autocomplete inputs that are on the main page.
How can I add a click handler to detect what was clicked and cancel the close function if the target of the click was the scrollbar of the autocomplete.
Id love to just comment but since my renown isnt high enough here:
Try going trough this post it might contain solution for you.
Clicking on a div's scroll bar fires the blur event in I.E
I have a small query, I have a multiple dropdown box in my form. after selecting multiple value, if I click on outside the multiple drop down box page should reload. How can I make it happen using javascript. I have used "onmouseout(reload.form)" option but it is not working. Please help me on this.
Thanks
Ranjith
In this scenario, you might need click event rather mouseout(which is not on click but when mouse loses the focus).
For more details about click outside the element refer the below link
Javascript Detect Click event outside of div
So once you capture the click out event, you can just trigger the page load using
window.location.reload(true) or window.location.reload(false)
true or false depends on you need to load from cache or server.
Hope it helps!!
Seems like you should really connect to the change() signal on the select box instead. By depending on the mouse event, you will prevent people form using your form with the keyboard only, for instance. onmouseout will also not work on mobile devices
I am using FullCalendar with an array of events to populate it. To remove events from the calendar, the user clicks an event box and a dialog box pops up. There is an x in this box that triggers the removeEvent method.
In this method I filter out the event matching this id of the removed element, then remove and re-add the source like this
calendar.fullCalendar('removeEvents');
calendar.fullCalendar('removeEventSource', addedEvents);
calendar.fullCalendar('addEventSource', addedEvents);
calendar.fullCalendar('refetchEvents');
calendar.fullCalendar('rerenderEvents');
All of this works fine (the event gets removed), but after that, I can no longer interact with the events. Clicking an event does not open the dialog box. It's almost as if the elements are no longer there, but I can still see them.
Any help troubleshooting this would be appreciated. Thank you.
It seems there is a bug in the dojox.grid.EnhancedGrid. The "onApplyCellEdit" is not triggered on editing a cell and then clicking Ok button in IE browser. Here is a jsfiddle,
http://jsfiddle.net/eZVkA/3/
As you can see, when you edit the cells in second column and then click on the button (without pressing enter or clicking on the grid), the "onApplyCellEdit" is triggered in all the browsers except IE. I presume this is a bug.
I am trying to resolve this by using emit function but not sure how to use it properly. I wish to use emit on click event of the button and trigger the "onApplyCellEdit" of the EnhancedGrid.
Any solutions?
You do not need emit but it is a good function to learn though.
http://dojotoolkit.org/reference-guide/1.9/dojo/on.html
by calling grid.edit.apply(); it will trigger the event. Grid is referring to the widget itself.