focus() not working

RabbitTrail

Below is code I have been trying. Everything works except the focus. When the alert box's OK is clicked, focus is not set to the blank text/textarea control that caused the error to happen. According to articles online, this should work but it is not. Any suggestions would be greatly appreciated.

Trying It Out
function checkForm()
{
var str = ''; //for testing purposes later
var e = document.getElementById('myForm').elements;

   //Insert for statement here//
	for(i=0; i <= e; i++){
		if(e\[i\].value.length <1){
			alert("The field " + e.\[i\].name + " is blank");
			var mytext = document.getElementById(e\[i\].name)
			mytext.focus();
			return false;
			
		}
	}

 }

Your Name:

Interesting Fact About You:

something about you

Peter Leow

You have made 3 mistakes in your javascript:

i <= e

should be

i < e.length

and

e[i].value.length <1

should be, use trim to prevent user from entering all white space

e[i].value.trim().length < 1

and

var mytext = document.getElementById(e[i].name)

should be

var mytext = e[i];

See the corrected code:

function checkForm()
{
var str = ''; //for testing purposes later
var e = document.getElementById('myForm').elements;

//Insert for statement here
for(i=0; i < e.length; i++){
if(e[i].value.trim().length < 1){
alert("The field " + e[i].name + " is blank");
var mytext = e[i];
mytext.focus();
return false;
}
}
}

Remember to accept this answer and vote.

RabbitTrail

Thank you for pointing out my mistakes. I modified my code to include your corrections but the focus still does not put the cursor in the blank text or textarea continters. Any other suggestions? I have tried the code in IE, Firefox and Chrome.

Peter Leow

Try the full example:

<!DOCTYPE html>
<head>
<meta "charset=utf-8" />
<title>Trying It Out</title>
<script type="text/javascript">
function checkForm()
{
var str = ''; //for testing purposes later
var e = document.getElementById('myForm').elements;

//Insert for statement here
for(i=0; i < e.length; i++){
if(e[i].value.trim().length == 0){
alert("The field " + e[i].name + " is blank");
var mytext = e[i];
mytext.focus();
return false;
}
}
}
</script>
</head>

<body>

<form id="myForm" name="myForm" action="showIt.htm">
<p>
Your Name:

<input type="text" name="Your_Name" value="enter your name" />
</p>
<p>
Interesting Fact About You:

<textarea name="Interesting_Fact">something about you</textarea>
</p>
<input type="submit" value="Submit Data" onclick="return checkForm();" />

</form>
<hr />
<div id="showTheValues"></div>
</body>
</html>

Blikkies

It could be the syntax error, add a semicolon at the end of this line:

var mytext = document.getElementById(e[i].name)

venkatpvc

Please note the changes...

<html lang="en">
<head>
<meta "charset=utf-8" />
<title>Trying It Out</title>
<script type="text/javascript">
function checkForm()
{
var str = ''; //for testing purposes later
var e = document.getElementById("myForm").elements;
for (var i = 0; i < e.length; i++) {
var val = e[i].value;
if (val.length == "" ) {
alert("The Field " + e[i].name + " is blank")
e[i].focus();
return false;
}
}
}
</script>
</head>

<body>

Your Name:

Interesting Fact About You:

<textarea id="Interesting_Fact" name="Interesting_Fact">something about you</textarea>

</form>

</body>
</html>

Sunasara Imdadhusen

Please use following solution. I have verified and it is working fine for textbox.

function checkForm()
{
var str = ''; //for testing purposes later
var e = document.getElementsByTagName('input');

  //Insert for statement here//
   for(i=0; i <= e.length; i++){
       var type = e\[i\].getAttribute('type');
       if(type == "text" || type == "textarea"){
           if(e\[i\].value.length <1){
               alert("The field " + e\[i\].name + " is blank");
               e\[i\].focus();
               return false;
           }
       }
   }
}

blachsmith

e.[i].name what's the fucking dot between e and [i] for?

RabbitTrail

Thank you. I works fine.