Validation problem in IE & FF (works perfect in GC)

Question

CKShia 0 Newbie Poster

12 Years Ago

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>

focus javascript

2 Contributors
3 Replies
174 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

All 3 Replies

Taywin 312 Posting Virtuoso

12 Years Ago

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 12 Years Ago by Taywin because: n/a

Reply to this topic

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.

CKShia 0 Newbie Poster · Answer 1 · 2011-10-08T20:19:02+00:00

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... =(

Taywin 312 Posting Virtuoso · Answer 2 · 2011-10-08T21:43:20+00:00

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.

Validation problem in IE & FF (works perfect in GC)

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers