§ 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
Comments
buy site says:
I came across to your post when searching for more details on this thread. You really make me understand how it works.
August 23rd, 2011 at 7:06 AM
Add your comment
Categories
Comments
- Walid on "Adventures with Ubuntu 9.10 on G4 Yikes!" - I am in the same process as you. Although I still dual-boot to Windows for my ganimg leisure. My first contact with Ubuntu was way…
- Slashback on "Simpler adding & removing element classnames" - Actually, the addClassName function does what you want, pretty much the same way you suggest.
- angie on "Simpler adding & removing element classnames" - And what if I want to add a class, but keeping the csseals the element already has?I mean, I have an element with a class, let's name…
- backlinks on "Adjust iframe height to contents" - Definitely helped me.
- Slashback on "Simpler validate form fields are filled in (no additional class names)" - You are welcome!
Slashback says:
You are welcome!
August 27th, 2011 at 11:52 AM