§ Simpler validate form fields are filled in (no additional class names)
Makes sure something is entered in form fields. If your form fields have classnames, don't use this one!
This makes sure form fields are filled in. If not, you get an alert and the required fields are highlighted with a red border.
If you need additional class names for the fields, see Validate form fields are filled in (additional class names).
function validateformhighlight(aform)
{
var focusme;
for (var i=0;i<aform.length;i++)
{
if (aform.elements[i].className=="required" ||aform.elements[i].className=="highlightborder")
{
if (aform.elements[i].value=="")
{
if (focusme==undefined)
focusme=aform.elements[i];
aform.elements[i].className="highlightborder";
}
else
aform.elements[i].className="required";
}
}
if (focusme!=undefined)
{
alert("Please fill in the highlighted fields.");
focusme.focus();
return false;
}
return true;
}
Use a form (and css) like this:
<html>
<head>
<title></title>
<script src='validateformhighlight.js' type='text/javascript'></script>
<style type="text/css">
input, label
{
float:left;
display:block;
width:300px;
}
label
{
width:120px;
text-align:right;
padding:0px 20px 12px 0px;
}
textarea#submissiontext
{
width:585px; /* 70cols */
margin:0px 0px 12px 0px;
}
br
{
clear:left;
}
#formdiv
{
margin:20px;
}
.highlightborder
{
border: 2px solid red;
}
</style>
</head>
<body>
<form action="http://livethepursuit.com/submission/process.php" method="post" onSubmit="return validateformhighlight(this)">
<input type="hidden" name="form_tools_form_id" value="1" />
<label for="fname">First Name:</label><input name="fname" id="fname" class="required"><br>
<label for="lname">Last Name:</label><input name="lname" id="lname" class="required"><br>
<label for="email">Email:</label><input name="email" id="email" class="required"><br>
<label for="age">Age:</label><input name="age" id="age" maxlength="3" class="required"><br>
<label for="city">City:</label><input name="city" id="city" class="required"><br>
<label for="state">State:</label><input name="state" id="state" maxlength="2" class="required"><br>
<label for="submissiontext">Submission:</label>
<textarea name="submissiontext" id="submissiontext" rows="20" cols="70" class="required"></textarea>
<br>
<label> </label><input type="submit" value="Submit" style="width:120px">
</form>
</body>
</html>
last edited on January 14th, 2010 at 2:21 PM
Categories
Comments
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate() function is rather simple and straightforward, so I find it quite odd that Chrome can't handle it. I do…
- Joaquin Serra on "window.onload via double delegate function" - Hello, i'm using this function one year but i realized now that in Google chrome doesn't work. Have you got some solution?
- tadd on "Javascript function to add css" - thanks for the post
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate function just needs to be available, so include it once somewhere in your html file or an included javascript…
- Neil Haskins on "window.onload via double delegate function" - I don't understand exactly how this is to be used; I've just used javascript in a cut and paste manner really. Does the whole code go…
