on blur validation

prajakta · 12-15-2006, 04:09 AM

hi,
In my program have 2 fields. and that fiels must not be null. when i write the code both field onBlur it goes in loop.

code

function firstonblur()
{
if(document.getElementById('a').value.length<=0)
{
alert("Field A must be enter");
document.getElementById('a').focus();
}
}

function secondonblur()
{
if(document.getElementById('b').value.length<=0)
{
alert("Field B must be enter");
document.getElementById('b').focus();
}
}

plz send the perfect solution for this problem.

_Aerospace_Eng_ · 12-15-2006, 05:32 AM

Validating onblur is not the best option. Firstly it will put the user into a loop which you have discovered and 2nd it will force a console error in Firefox because of autocomplete. The preferred method is to validate in the end just before the form is submitted.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function doValidate()
{
	if(document.getElementById('a').value.length <= 0)
	{
		alert("Field A cannot be blank!");
		document.getElementById('a').focus(); 
		return false;
	}
	else if(document.getElementById('b').value.length <= 0)
	{
		alert("Field B cannot be blank!");
		document.getElementById('b').focus();
		return false; 
	}
}
</script>
</head>

<body>
<form action="#" method="post" onsubmit="return doValidate()">
<label for="a">Input A: <input type="text" name="a" id="a"></label><br>
<label for="b">Input B: <input type="text" name="b" id="b"></label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>