PDA

View Full Version : 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



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


<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



<!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
<!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



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


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


<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"



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


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



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



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


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


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

and forget about combining it with onsubmit.

vineet
10-04-2012, 05:44 PM
hi john

thanks for the reply.

how can i add a small "cross icon" before the message "sorry this login id already exists" in the below code



$count = mysql_num_rows(mysql_query("SELECT * FROM usertable WHERE `username`='".$username."'"));
header('Content-Type: text/xml');
header('Pragma: no-cache');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<result>';
if($count > 0) {
echo 'Sorry! This Login-ID already exists.';
}else{
echo '.';
}
echo '</result>';


this is ajax



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;
}
}

jscheuer1
10-04-2012, 06:17 PM
If I read that correctly there's always a:


xmlObj.getElementsByTagName('result').item(0).firstChild.data;

If a dupe was found, it's the "Sorry . . ." message. If not it's just a dot (.).

So you could test the length:


function statechange_username() {
if (http.readyState == 4) {
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
html = html.length > 1? '<img src="crossicon.gif" alt="">' + html : '';
document.getElementById('user_error').innerHTML = html;
}
}

You could do that. An alternative would be to put the image tag into the xml document as it's being created. I'm uncertain of the proper syntax for that, but believe it can be done. There might be cross browser issues around that though. Inserting it where I've just shown, in the javascript part of the operation, would be the safest.

Another approach would be to have the PHP code create an HTML fragment instead of an xml document, and have the statechange function use the responseText rather than the responseXML. Then it would be relatively easy to create cross browser HTML with the PHP script.


<?php
$count = mysql_num_rows(mysql_query("SELECT * FROM usertable WHERE `username`='".$username."'"));
header('Content-type: text/html; charset=utf-8');
header('Pragma: no-cache');
echo '<span>';
if($count > 0) {
echo '<img src="crossico.gif" alt="">Sorry! This Login-ID already exists.';
}
echo '</span>';
?>


function statechange_username() {
if (http.readyState == 4) {
document.getElementById('user_error').innerHTML = http.responseText;
}
}

vineet
10-05-2012, 03:21 PM
thanks john

Outputting the result as html instead of xml made the work really easy

your are great

vineet