why does error message blinks onsubmit

**vineet** · 10-02-2012, 01:32 PM

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

**jscheuer1** · 10-02-2012, 02:41 PM

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>

**vineet** · 10-02-2012, 03:07 PM

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>

**jscheuer1** · 10-02-2012, 03:16 PM

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>

**vineet** · 10-02-2012, 03:24 PM

thanks a lot john

it works perfect;

vineet

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

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>

**jscheuer1** · 10-03-2012, 03:24 PM

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>

**vineet** · 10-03-2012, 03:51 PM

thanks john

works perfect

vineet

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

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

**jscheuer1** · 10-04-2012, 03:30 PM

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.

Thread: why does error message blinks onsubmit

Thread Tools

Search Thread

why does error message blinks onsubmit

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Similar Threads

Can anyone help with an error message?

Error Message in 3d spinning message

XML error message

XML error message

Error message...

Bookmarks

Bookmarks

Posting Permissions