Member Avatar for CKShia

I want to have a real-time validation for the first name & last name to check if user entered the data before submit.
Well it's work fine in Google Chrome...

But in Firefox & Internet Explorer, if user press "Tab" key in "first name",
then the alert message will keep LOOPING between "first name" & "last name"
to perform the validation n thus infinite alert message keep pop-up.
Same apply when user press "Tab" key in "last name" & another LOOPING start.

Wondering how the "setTimeout" stuff works...
Here's my code, thanks a million =)

<head>
	<title>Form</title>
	<script type="text/javascript">
	function FN(field) {
		var chkFN = field.value;
		if (chkFN == null || chkFN == "") {
			alert("First name must fill !");
			setTimeout( function() { field.focus(); field.select(); }, 50);
			// setTimeout(0, 50);
			// field.focus();
			// field.select();
			return false;
		}
		return true;
	}
	function LN(field) {
		var chkLN = field.value;
		if (chkLN == null || chkLN == "") {
			alert("Last name must fill !");
			setTimeout( function() { field.focus(); field.select(); }, 50);
			// setTimeout(0, 50);
			// field.focus();
			// field.select();
			return false;
		}
		return true;
	}
	function EA(field) {
		var chkEA = field.value;
		if (chkEA == null || chkEA == "") {
			alert("Email must fill !");
			setTimeout( function() { field.focus(); field.select(); }, 50);
			// setTimeout(0, 50);
			// field.focus();
			// field.select();
			return false;
		}
		return true;
	}

	function validate(form) {
		var chkFN = document.forms["sendForm"]["txtFirstName"].value;
		if (chkFN == null || chkFN == "") {
			alert("First name must fill !");
			form.txtFirstName.focus();
			form.txtFirstName.select();
			return false;
		}
		var chkLN = document.forms["sendForm"]["txtLastName"].value;
		if (chkLN == null || chkLN == "") {
			alert("Last name must fill !");
			form.txtLastName.focus();
			form.txtLastName.select();
			return false;
		}
		var chkEA = document.forms["sendForm"]["txtEmail"].value;
		if (chkEA == null || chkEA == "") {
			alert("Email must fill !");
			form.txtEmail.focus();
			form.txtEmail.select();
			return false;
		}
	}
	</script>
</head>

<body>
<form name="sendForm" id="sendForm" onsubmit="return validate(this)">
<table>
	<tr>
		<td>First Name</td>
		<td>
			<input class="input" type="text" name="txtFirstName" id="txtFirstName"
				onblur="FN(this)" onchange="validate(this)" />
		</td>
	</tr>
	<tr>
		<td>Last Name</td>
		<td>
			<input class="input" type="text" name="txtLastName" id="txtLastName"
				onblur="LN(this)" onchange="validate(this)" />
		</td>
	</tr>
	<tr>
		<td>Email</td>
		<td>
			<input class="input" type="text" name="txtEmail" id="txtEmail"
				onblur="EA(this)" onchange="validate(this)" />
		</td>
	</tr>
	<tr>
		<td><input type="reset" value="Reset Form" title="Reset form" /></td>
		<td><input type="submit" value="Submit Form" title="Submit form" /></td>
	</tr>
</table>
</form>
</body>
</html>
  • 2 Contributors
  • 3 Replies
  • 184 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

OK. The problem is the way a browser fires "onblur" event. In this case, you use "onblur" on both First and Last field name. When a user skips entering the first name and presses "tab" button, the "onblur" event from the first name field is fired. Because in your validate function you move the focus back to the first name field, another "onblur" event from the last name field is fired. Then, the validate function of the last name field moves back the focus again. This will cause the infinite loop you are experiencing.

Using "onblur" event is very tricky. An alternative approach you may want to do is to do only the whole validation before the form is submit.

PS: Speaking of setTimeout() function, it will put the function you are calling to sleep up to a specified time. Once the time is up, the function will be executed. In other words, you can think of it as "sleep()" or "delay()" function.

Edited by Taywin because: n/a
Member Avatar for CKShia

Hmm... Thanks for giving solution.
But still, "sleep()" or "delay()" function works the same as setTimeout() in this case.
Still got the problem of infinite loop.

Have yet created another random solution.

<head><title>Form</title>
<script type="text/javascript">
	var i = 0;
	function FN(field) {
		if (i <= 1) {
			i = 1;
			var fn = document.forms["Fm"]["txtFN"].value;
			if (fn == null || fn == "") {
				alert("First name must fill !");
				back(field);
			}
			return true;
		}
		return true;
	}

	var j = 0;
	function LN(field) {
		if (i == 0 && j == 0) {
			var ln = document.forms["Fm"]["txtLN"].value;
			if (ln == null || ln == "") {
				alert("Last name must fill !");
				back(field);
			}
			return true;
		}
		i = 0;
		return true;
	}
	
	function back(field) { field.focus(); field.select(); return false; }
</script>
<!-- ******************************** -->
</head><body><form name="Fm" id="sendForm" onsubmit="return validate(this)">
<table>
<tr><td>First Name</td><td>
	<input class="input" type="text" name="txtFN" id="txtFN"
		onblur="FN(this)" onchange="validate(this)" />
</td></tr>
<tr><td>Last Name</td><td>
	<input class="input" type="text" name="txtLN" id="txtLN"
		onblur="LN(this)" onchange="validate(this)" />
</td></tr>
<tr><td>
	<input type="reset" value="Reset Form" title="Reset form" />
	</td><td>
	<input type="submit" value="Submit Form" title="Submit form" />
</td></tr>
</table>
</form></body></html>

if i am validating the individual coding it works fine,
"first name" will force user to fill "first name" before go to "last name",
n "last name" will force user to fill "last name" also.

but once i validated "first name", as the i set to 1,
"last name" won't be validated any more.

Headache... =(

Member Avatar for Taywin

What you may do to solve the problem is not to move the focus back tot he field, but display an error message somewhere saying that the field is empty. If you move the focus back and forth, it will go in an infinite loop. Also, I wouldn't recommend pop up for displaying errors. It is very annoying to use a page that way...

Oh, do you understand the sleep() and delay() in thread? It is similar but not the same as in a linear function call. In other words, even though you call setTimeOut(), other function being called by other events are still working regarding the one which is set to setTimeOut() - sleep.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.