Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

onblur and onclick events starting simulteneouly

  • 10 replies
  • 1 has this problem
  • 8 views
  • Paskiausią atsakymą parašė imranbagwan.cs

more options

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.

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)

more options

This is not web code building support....... Find other sources for checking your code please. https://stackoverflow.com/

more options
more options

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.

more options

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

more options

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.)

more options

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 :)

Modified by imranbagwan.cs

more options

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.

more options

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.

Modified by imranbagwan.cs

more options

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()
more options

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.

Modified by imranbagwan.cs