Help with js form validation

**pacman2504** · Nov 3, 2003, 09:47

Sorry for submitting such a simple query, but I'm not too hot on javascript!

I want to validate a form so that if there is an error, an error message will appear in another input field. I've used the following code, but it doesn't work so there's clearly something wrong:

Code:

 if (theForm.surname1.value == "")
  {
    document.write.surname1error("Please enter a value");
    theForm.surname1.focus();
    return (false);
  }
  return (true);

**adios** · Nov 3, 2003, 10:22

Code:

if (theForm.surname1.value == "" )
  {
    theForm.surname1error.value = "Please enter a value";
    theForm.surname1.focus();
    return false;
  }
  return true;

That's assuming the 'error field' has name="surname1error", and that 'theForm' is a valid reference to the Form object. Strictly speaking, this isn't the best way to get your user's attention.

The document.write() function is a very generalized way to output HTML dynamically; you don't use it after the page is loaded.

**pacman2504** · Nov 3, 2003, 11:40

Thanks, adios.

Originally Posted by adios

Strictly speaking, this isn't the best way to get your user's attention.

Maybe it's just me but I hate alert boxes! The form in question is short, and I think this looks a bit more professional, although I do agree that it's probably not the best way.

**adios** · Nov 3, 2003, 12:44

Nah, we hate 'em too. Who wants to be 'alerted'?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var req_fields = ['firstname1' , 'middlename1' , 'surname1'];

function checkform(oForm)
{
	for (var field, bad = 0, f = 0; f < req_fields.length; ++f)
	{
		field = oForm.elements[req_fields[f]];
		if (field.value == field.defaultValue || /^\s*$/.test(field.value))
		{
			field.value = field.defaultValue;
			field.style.border = '2px #f00 dashed';
			bad = 1;
		}
	}
	if (bad)
		return false;
	else return true;
}

function restore(oText)
{
	oText.style.border = '2px #000 solid';
}

function restoreAll(oForm)
{
	for (var field, f = 0; f < req_fields.length; ++f)
	{
		field = oForm.elements[req_fields[f]];
		restore(field);
	}
}

</script>
</head>
<body style="margin:100px;">
<form name="theForm" action="javascript&#58;alert('ok')" onsubmit="return checkform(this)" onreset="restoreAll(this)">
<input id="firstname1" name="firstname1" type="text" style="width:156px;padding:2px;border:2px #000 solid;" 
value="Please enter a value here." 
onclick="if(this.value==this.defaultValue)this.value='';restore(this)" 
onkeypress="restore(this)">___first name<br />
<input id="middlename1" name="middlename1" type="text" style="width:156px;padding:2px;border:2px #000 solid;" 
value="Please enter a value here." 
onclick="if(this.value==this.defaultValue)this.value='';restore(this)" 
onkeypress="restore(this)">___middle name<br />
<input id="surname1" name="surname1" type="text" style="width:156px;padding:2px;border:2px #000 solid;" 
value="Please enter a value here." 
onclick="if(this.value==this.defaultValue)this.value='';restore(this)" 
onkeypress="restore(this)">___last name<br /><br />
<input type="submit" value="submit">
<input type="reset" onclick="return confirm('Clear all entries?')">
</form>
</body>
</html>

**pacman2504** · Nov 4, 2003, 03:33

Ah, now that's much better. I'm not sure that I completely understand the code, though. Would I need to repeat this bit for each of the fields to be validated?:

Originally Posted by adios

Code:


function checkform(oForm)
{
	var field = oForm.surname1;
	if (field.value == field.defaultValue || /^\s*$/.test(field.value))
	{
		field.value = field.defaultValue;
		field.style.border = '2px #f00 dashed';
		field.focus();
		field.select();
		return false;
	}
	return true;
}

function restore(oText)
{
	oText.style.border = '2px #000 solid';
}

And, in the the <form> tag, how would I repeat the onreset="restore(surname1)" for each field?

**adios** · Nov 4, 2003, 12:08

I'm not sure that I completely understand the code either.

Nevertheless...edited the above. Alert!

**pacman2504** · Nov 5, 2003, 03:47

Originally Posted by adios

I'm not sure that I completely understand the code either.

I admire your honesty

Thanks for that, adios - most helpful.

**beetle** · Nov 5, 2003, 04:42

If you hate alert boxes, try fValidate. It has over two dozen error-notification choices.

The SitePoint Forums have moved.

User Tag List

Thread: Help with js form validation

Thread Tools

Display

Help with js form validation

Bookmarks

Bookmarks

Posting Permissions