« Blog Home

§ 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>&nbsp;</label><input type="submit" value="Submit" style="width:120px">
</form>
  </body>
</html>
 

 

last edited on January 14th, 2010 at 2:21 PM

Comments

Slashback says:

You are welcome!

August 27th, 2011 at 11:52 AM

humour says:

thanks for the script !

August 27th, 2011 at 11:12 AM

Slashback says:

Thank you. I'm glad it helped!

August 23rd, 2011 at 9:36 AM

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

Name:
Email: (Will not be displayed - Privacy policy)
Website:
Comments:
  random image I can't read it!
Give me a different one!
Verify Post: Input the text from the image above to verify this post (helps prevent spam)
 

« Blog Home


“...Yeah, even in the slowness, a big program can be full of surprises.”
Pham Nuwen, A Fire Upon the Deep, Vernor Vinge