onblur and onclick events starting simulteneouly
I have hyperlink in a webpage, that calls a javascript function.
i have another .js file that contains validation methods,
when i provide a invalid input as per the criteria, it works for onblur,
when i provide a invalid input and hit hyperlink directly, it is not stopping for onblur to complete.
it goes further and executes.
All Replies (10)
This is not web code building support....... Find other sources for checking your code please. https://stackoverflow.com/
I haven't tried to figure out what's happening in your form, but I suggest applying the disabled attribute to the link until validation completes and then remove it so the user can submit the form. Alternately, don't allow the link to navigate until its onclick handler returns true.
actually, there are 160+ jsp files, and for suggested solution, i need to update those. As mentioned above, i posted my question to stackoverflow
but i was expecting someone from Mozilla team to address this issue, and not sure, why there is different behavior than other browsers.
i have some links, the issue is there since long time, and why it is not addressed.
http://forums.mozillazine.org/viewtopic.php?f=38&t=1944437 http://forums.mozillazine.org/viewtopic.php?f=9&t=3037034 http://forums.mozillazine.org/viewtopic.php?f=9&t=155303&e=0
Those MozillaZine threads refer to the blur event, so I'll cite an old response I posted on MozillaZine in 2008 (that also has other links for more code examples):
Here is some documentation on this event: http://developer.mozilla.org/docs/DOM:element.onblur
Note that the blur event fires after the control has lost focus. So returning false, canceling the event, etc., cannot undo the fact that focus has already shifted. One approach that works is to navigate back a few milliseconds later, using window.setTimeout(). However, if the blur is due to the user submitting the form, that won't help, you have to handle the submit directly.
When I try your test code in this post, I see the same issue in Firefox 57. You are assigning location.href without re-validating the form.
In addition to the event handlers being ineffective in preventing navigation, this is not a secure design pattern because an attacker can modify form field values without triggering handlers. Of course, your actual script on the server side will re-validate the inputs so you can redirect back to the first page if the data submitted is not actually valid, but it is preferred to have additional checking on the client side.
You don't need to work on all 160 pages at once. Fix one and make sure it really works, then figure out the most efficient way to apply the changes to all pages such as <script src="external.js"> because certainly this won't be the last round of changes.
(Also, I don't know if this is real validation code, but a period should not be allowed in an integer field.)
Thanks jscher2000 for your reply,
as mentioned above, i already have all the validation methods in another .js named as validation.js.
and i am using that in all other jsp's,
so whatever code i written in the MozillaZine is just an overview of issue,you can ignore the window.location, what my concern is, it going inside that block, with completing the onblur event. considering that usecase i am just trying to say that similar issue i am facing.
i already had a validation at client side, then only i am submitting the form, so it is working for other browsers, but not sure why it is not working in Mozilla, even i checked this scenarios in Linux Konqueror also. that is also working as expected.
i am suspecting the event ordering of Mozilla is different than other browsers.
again, thanks for you time :)
imranbagwan.cs மூலமாக
Hi imranbagwan.cs, I apologize if this sounds rude, but please do not waste my time with example code that is not the code you need to fix.
Hi jscher2000,
what my concern is, if you are able to solve this problem whatever in sample code,
will change my code according to your solution.
here, i am adding code with comment.
<script type="text/javascript">
//************************************************
// this are methods from validatio.js
//************************************************
function isValidFraction(inputObj) {
if(!inputObj.value.match(/^\d+(\.\d+)?$/)){
inputObj.value="";
//inputObj.focus();
alert("Inavlid Float Number");
return false;
}
return true;
}
function isValidInteger(inputObj) {
if(!inputObj.value.match(/^\d+(\.\d+)?$/)){
inputObj.value="";
//inputObj.focus();
alert("Inavlid Integer Number");
return false;
}
return true;
}
//*************************************************
/*
Save method(s) definition is in each jsp
*/
function save(){
alert("in Save Method..")
window.location = "https://google.co.in";
}
</script>
Save
<input type="text" id="float_input" placeholder="Float Value" onblur="if(isValidFraction(this)){alert('valid.......');}">
<input type="text" id="int_input" placeholder="Int Value" onblur="if(isValidInteger(this)){alert('valid.......');}">
i am really sorry, for inconvenience.
if any more information is required, just let me know. will provide that.
i guess, html tags are getting executed here.
adding image.
imranbagwan.cs மூலமாக
Hi imranbagwan.cs, that is the same code I tested before. So my comment is the same:
- blur fires AFTER focus leaves the control
- return false therefore is too late to stop focus from leaving
- to return focus to the input with the invalid value, use a setTimeout()
Hi jscher2000,
Thank you so much for your efforts and time.
Lastly, can you just give me some info,
what is the thing, the code is working in other browsers and not in Mozilla.
imranbagwan.cs மூலமாக