why does error message blinks onsubmit

Printable View

Show 40 post(s) from this thread on one page

10-02-2012, 01:32 PM
vineet

why does error message blinks onsubmit

hi all

why does my validation error messages blink for a second on click of submit button

they dont stay static.

whats the solution

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> </head> <script type="text/javascript"> function doValidate() { if(document.registerform.textbox1.value= " ") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; } if(document.registerform.textbox2.value= " ") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; } } </script> <body> <form onsubmit="return doValidate();" method="post" name="registerform"> <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div> <input name="textbox1" id="textbox2" /><div id="hiddenDiv2"></div> <input type="submit" name="" value="Submit"/> </form> </body> </html>

vineet
10-02-2012, 02:41 PM
jscheuer1

To prevent it from submitting, you need to return false for an invalid form. And your tests will always be true as they're using single = signs which set a condition, rather than test a condition. It's true because they're setting a true or 'truthy' condition (value = space char).

This should work:

Code:

<script type="text/javascript"> function doValidate() { var isvalid = true; if(document.registerform.textbox1.value == "") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; isvalid = false; } if(document.registerform.textbox2.value == "") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; isvalid = false; } return isvalid; } </script>
10-02-2012, 03:07 PM
vineet

hi john

i tried it

but the errors doesnt disappear when second time i enter correct data and click submit button.

Am i doing something wrong?

vineet

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> </head> <script type="text/javascript"> function doValidate() { var isvalid = true; if(document.registerform.textbox1.value == "") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; isvalid = false; } if(document.registerform.textbox2.value == "") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; isvalid = false; } return isvalid; } </script> <body> <form onsubmit="return doValidate();" method="post" name="registerform"> <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div> <input name="textbox2" id="textbox2" /><div id="hiddenDiv2"></div> <input type="submit" name="" value="Submit"/> </form> </body> </html>
10-02-2012, 03:16 PM
jscheuer1

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> </head> <script type="text/javascript"> function doValidate() { var isvalid = true; document.getElementById("hiddenDiv").innerHTML = document.getElementById("hiddenDiv2").innerHTML = ''; if(document.registerform.textbox1.value == "") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; isvalid = false; } if(document.registerform.textbox2.value == "") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; isvalid = false; } return isvalid; } </script> <body> <form onsubmit="return doValidate();" method="post" name="registerform"> <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div> <input name="textbox2" id="textbox2" /><div id="hiddenDiv2"></div> <input type="submit" name="" value="Submit"/> </form> </body> </html>
10-02-2012, 03:24 PM
vineet

thanks a lot john

it works perfect;

vineet
10-03-2012, 10:56 AM
vineet

hi john

i tried to add "focus" on the input fields with error

but the "focus" goes to 2nd field even if the 1st field is empty

vineet

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> </head> <script type="text/javascript"> function doValidate() { document.getElementById("hiddenDiv").innerHTML = ''; document.getElementById("hiddenDiv2").innerHTML = ''; var isvalid = true; if(document.registerform.textbox1.value == "") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; document.registerform.textbox1.focus(); isvalid = false; } if(document.registerform.textbox2.value == "") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; document.registerform.textbox2.focus(); isvalid = false; } return isvalid; } </script> <body> <form onsubmit="return doValidate();" method="post" name="registerform"> <input name="textbox1" id="textbox1" /><div id="hiddenDiv"></div> <input name="textbox2" id="textbox2" /><div id="hiddenDiv2"></div> <input type="submit" name="" value="Submit"/> </form> </body> </html>
10-03-2012, 03:24 PM
jscheuer1

I don't think you mean an error like it breaks the script, rather that if both fields are empty you want the focus to go to the first field but it's going to the second. If that's the problem:

Code:

<script type="text/javascript"> function doValidate() { document.getElementById("hiddenDiv").innerHTML = ''; document.getElementById("hiddenDiv2").innerHTML = ''; var isvalid = true; if(document.registerform.textbox1.value == "") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; document.registerform.textbox1.focus(); isvalid = false; } if(document.registerform.textbox2.value == "") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; if(isvalid){ document.registerform.textbox2.focus();} isvalid = false; } return isvalid; } </script>

But that still might not work out because after focusing on the first field you write to the hidden div of the second, that might disrupt focus, it might not, but to be sure you could do:

Code:

<script type="text/javascript"> function doValidate() { document.getElementById("hiddenDiv").innerHTML = ''; document.getElementById("hiddenDiv2").innerHTML = ''; var isvalid = true, focusfield; if(document.registerform.textbox1.value == "") { document.getElementById("hiddenDiv").innerHTML = "enter your email id its required"; focusfield = document.registerform.textbox1; isvalid = false; } if(document.registerform.textbox2.value == "") { document.getElementById("hiddenDiv2").innerHTML = "enter your password id its required"; if(!focusfield){focusfield = document.registerform.textbox2;} isvalid = false; } if(focusfield){focusfield.focus();} return isvalid; } </script>
10-03-2012, 03:51 PM
vineet

thanks john

works perfect

vineet
10-04-2012, 11:35 AM
vineet

hi john

In continuation of the above validation code...

I would like to add the another function to the form "onsubmit"

at present this function performs on "onkeyup"

Code:

<input type="text" name="textbox1" onkeyup="toggle_username('textbox1')"/>

i want to perform this function on "onkeyup" and also on "onsubmit"

Code:

function toggle_username(userid) { if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } handle = document.getElementById(userid); var url = 'check_user.php?'; if(handle.value.length > 0) { var fullurl = url + 'do=check_username_exists&textbox1=' + encodeURIComponent(handle.value); http.open("GET", fullurl, true); http.send(null); http.onreadystatechange = statechange_username; }else{ document.getElementById('user_error').innerHTML = ''; } } function statechange_username() { if (http.readyState == 4) { var xmlObj = http.responseXML; var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data; document.getElementById('user_error').innerHTML = html; } }

so that 2 functions perform "onsubmit".

Code:

<form onsubmit="return doValidate();" method="post" name="registerform">

vineet
10-04-2012, 03:30 PM
jscheuer1

Does that even work? I ask because you have getElementById, but that id is the element's name, not its id. I think some browsers will do that, maybe.

A problem with doing that onsubmit would be that, since it's asynchronous (means other things on the page may continue on without waiting for it to complete) it might not return any data in time before the form submits, which reloads the page or takes you to another page, either way any asynchronous process not yet completed would be aborted.

Both those things said, syntactically you may run two things onsubmit like so:

Code:

<form onsubmit="toggle_username('textbox1'); return doValidate();" method="post" name="registerform">

But if toggle_username('textbox1') throws a javascript error, and by that I mean has a problem, not that it reports an error message for the name, then doValidate() will never get a chance to fire and the form will submit anyway, regardless of whether or not it passes the validation.

I think the better approach, rather than using onkeyup and/or trying to combine it with onsubmit might be to fire it onchange of the input.

This could still get you into problems if it throws a javascript error, so you might want to do something like so:

Code:

<input type="text" name="textbox1" id="textbox1" onchange="try{toggle_username('textbox1');}catch(e){}"/>

and forget about combining it with onsubmit.

Show 40 post(s) from this thread on one page