§ Validate form fields are filled in (additional class names)
Makes sure something is entered in form fields. Uses regex to replace classnames so other classnames aren't affected.
This just makes sure required fields have something in them. You can do your own validation that the contents meet your criteria.
This also illustrates adding class names to and removing them from elements.
If you don't need the fields to have additional class names, see Simpler validate form fields are filled in (no additional class names).
function validateformhighlight(aform) {
var focusme;
var classnamei;
var requiredregex = new RegExp("required");
var highlightregex = new RegExp("highlightborder");
for (var i=0;i<aform.length;i++) {
classnamei = aform.elements[i].className;
if (requiredregex.test(classnamei) || highlightregex.test(classnamei)) {
if (aform.elements[i].value=="") {
if (focusme==undefined)
focusme=aform.elements[i];
if (requiredregex.test(classnamei)) {
aform.elements[i].className = classnamei.replace(/required/,"highlightborder");
}
}
else {
if(highlightregex.test(classnamei))
aform.elements[i].className = classnamei.replace(/highlightborder/,"required");
}
}
}
if (focusme!=undefined) {
alert("Please fill in the highlighted fields.");
focusme.focus();
return false;
}
return true;
}
Use a form like this (and the css, of course):
<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="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 other"><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 other"><br>
<label for="age">Age:</label><input name="age" id="age" maxlength="3" class="required something else"><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
- 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!
