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.

User Tag List

Thread: Help with js form validation

Thread Tools

Display

Help with js form validation

Bookmarks

Bookmarks

Posting Permissions