Validation Help

Matthew Herren · October 12, 2009

I have a Javascript validation for my form and it only validates three fields, Name, Last, and E-mail. I have Quite a few fields, and wonder if you guys could help?

My whole form page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Auto Club Registry</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="/scripts/style.css" type="text/css" />
<?php
include '/home/content/d/h/e/dherren/html/scripts/styles.php';
     ?>
<!-- Form JS -->
<script language="JavaScript" src="/scripts/gen_validatorv31.js" type="text/javascript"></script>
<script type="text/javascript">

function ShowOneCar()
{
if (document.getElementById("onecar").style.display == "none") {

    document.getElementById("onecar").style.display = '';

if (document.getElementById("twocars").style.display == '') {

    document.getElementById("twocars").style.display = "none";

  }

if (document.getElementById("threecars").style.display == '') {

    document.getElementById("threecars").style.display = "none";

  }

  }

  else {

    document.getElementById("onecar").style.display = "none";


  }



}

function ShowTwoCars()
{
if (document.getElementById("twocars").style.display == "none") {

    document.getElementById("twocars").style.display = '';

if (document.getElementById("onecar").style.display == '') {

    document.getElementById("onecar").style.display = "none";

  }

if (document.getElementById("threecars").style.display == '') {

    document.getElementById("threecars").style.display = "none";

  }


  }

  else {

    document.getElementById("twocars").style.display = "none";


  }


}

function ShowThreeCars()
{
if (document.getElementById("threecars").style.display == "none") {

    document.getElementById("threecars").style.display = '';

if (document.getElementById("onecar").style.display == '') {

    document.getElementById("onecar").style.display = "none";

  }

if (document.getElementById("twocars").style.display == '') {

    document.getElementById("twocars").style.display = "none";

  }


  }

  else {

    document.getElementById("theecars").style.display = "none";


  }

}

</script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
	<div id="header">
                <?php include("header.php"); ?>
                <!-- beggin menu -->
                <?php include("menu.html"); ?>
	<!-- end #menu -->
	</div>
	<!-- end #header -->

<!-- end #header-wrapper -->
<div id="page">
        <div id="page-bgtop">
<div id="page-bgbtm">

	<div id="page-bgcontent">
		<div id="content">
<div class="mem">Members of T.R.A.K & Coach Net Provider ~ Damage Free Towing!</div>
<div class="pic1"><img src="/Pictures/Nova2.jpg" alt="Becca's Towing" width="240" height="180" /></div>
<div class="pic2"><img src="/Pictures/untitled.jpg" alt="Becca's Towing" width="240" height="180" /></div>
<div id="form_container">


		<div class="form_description">
		<p>Step 1. Contact Information</p>
	 </div>	
                 <form name="auto1" method="post" class="beccas" action="confirm.php" onsubmit="returnValidate();">					
         <ul >
		<li><div id='auto1_errorloc' class='error_messages'><span style color="#ff0000">&#8224;</span> Required Fields.</li>
				<li id="li_5" >
	<label class="description" for="element_5">Name&#8224; </label>

	<span>
		<input id="element_5_1" name= "name" class="element text" maxlength="255" size="14" value=""/>
		<label>First</label>
	</span>
	<span>
		<input id="element_5_2" name= "last" class="element text" maxlength="255" size="14" value=""/>
		<label>Last</label>
	</span>
	<span>
		<input id="last" name= "mi" class="element text" maxlength="1" size="2" value=""/>
		<label>M.I.</label>
	</span>  
	</li>
                        <li id="li_9" >

	<label class="description" for="element_9">Password&#8224;</label>
	<span>
		<input id="element_9_1" name="password" class="element text large" size="9" maxlength="9" size="15" value="" type="password">
	</span>
                <span>
		<input id="element_9_1" name="password_confirm" class="element text large" size="9" maxlength="9"  size="15" value="" type="password">
	</span>

	</li>		<li id="li_1" >

	<label class="description" for="element_1">Address&#8224; </label>

	<div>
		<input id="element_1_1" name="add" class="element text large" value="" type="text">
		<label for="element_1_1">Street Address</label>
	</div>

	<div>
		<input id="element_1_2" name="add2" class="element text large" value="" type="text">
		<label for="element_1_2">Address Line 2</label>

	</div>

	<div class="left">
		<input id="element_1_3" name="city" class="element text medium" value="" type="text">
		<label for="element_1_3">City</label>
	</div>

	<div class="right">
		<input id="element_1_4" name="state" class="element text medium" maxlength="2" size="2" value="" type="text">
		<label for="element_1_4">State</label>

	</div>

	<div class="left">
		<input id="element_1_5" name="zip" class="element text medium" maxlength="5" size="5" value="" type="text">
		<label for="element_1_5">Zip Code</label>
	</div>

	</li>		<li id="li_8" >

	<label class="description" for="element_8">E-mail&#8224;</label>
	<span>
		<input id="element_8_1" name="email" class="element text large" size="100" maxlength="25" size="15" value="" type="email">
	</span>

	</li><li id="li_2" >

	<label class="description" for="element_2">Home Phone</label>
	<span>
		<input id="element_2_1" name="hp" class="element text" size="13" maxlength="13" value="(502)" type="text">
		<label for="element_2_1">(###)###-####</label>
	</span>

	</li>		<li id="li_4" >
	<label class="description" for="element_4">Cell Phone</label>

	<span>
		<input id="element_4_1" name="cp" class="element text" size="13" maxlength="13" value="(502)" type="text">
		<label for="element_4_1">(###)###-####</label>
	</span>

	</li>		<li id="li_3" >
	<label class="description" for="element_3">Work Phone</label>
	<span>

		<input id="element_3_1" name="work" class="element text" size="13" maxlength="13" value="(502) "type="text">
		<label for="element_3_1">(###)###-####</label>
	</span>

	</li>		<li id="li_6" >
	<label class="description" for="element_6">How many vehicles&#8224;  </label>

              
<label class="description" for="element_6">Vehicle 1&#8224;</label>
	<div>
		<input id="element_1_1" name="make" class="element text large" size="10" maxlength="20" value="" type="text">
		<label for="element_1_1">Make</label>
	</div>
	<div>
		<input id="element_1_2" name="model" class="element text large"  size="10" maxlength="20" value="" type="text">
		<label for="element_1_2">Model</label>

	</div>
	<div class="left">
		<input id="element_1_3" name="color" class="element text medium"  size="10" maxlength="10" value="" type="text">
		<label for="element_1_3">Color</label>
	</div>
	<div class="right">
		<input id="element_1_4" name="plate" class="element text medium" maxlength="7" size="7" value="" type="text">
		<label for="element_1_4">Plate</label>

	</div>
<label class="description" for="element_6">Vehicle 2&#8224;</label>
	<div>
		<input id="element_1_1" name="make2" class="element text large" size="10" maxlength="20" value="" type="text">
		<label for="element_1_1">Make</label>
	</div>
	<div>
		<input id="element_1_2" name="model2" class="element text large"  size="10" maxlength="20" value="" type="text">
		<label for="element_1_2">Model</label>

	</div>
	<div class="left">
		<input id="element_1_3" name="color2" class="element text medium"  size="10" maxlength="10" value="" type="text">
		<label for="element_1_3">Color</label>
	</div>
	<div class="right">
		<input id="element_1_4" name="plate2" class="element text medium" maxlength="7" size="7" value="" type="text">
		<label for="element_1_4">Plate</label>

	</div>
<label class="description" for="element_6">Vehicle 3&#8224;</label>
	<div>
		<input id="element_1_1" name="make3" class="element text large" size="10" maxlength="20" value="" type="text">
		<label for="element_1_1">Make</label>
	</div>
	<div>
		<input id="element_1_2" name="model3" class="element text large"  size="10" maxlength="20" value="" type="text">
		<label for="element_1_2">Model</label>

	</div>
	<div class="left">
		<input id="element_1_3" name="color3" class="element text medium"  size="10" maxlength="10" value="" type="text">
		<label for="element_1_3">Color</label>
	</div>
	<div class="right">
		<input id="element_1_4" name="plate3" class="element text medium" maxlength="7" size="7" value="" type="text">
		<label for="element_1_4">Plate</label>

	</div>
                </div>
	</li>

				<li class="buttons">
    <button type="reset" value="Reset">Reset</button>
    <button type="submit" value="Submit">Submit</button>
</li>
</ul>
</form>
<script language="JavaScript" type="text/javascript">
  var frmvalidator  = new Validator("auto1");
  frmvalidator.EnableOnPageErrorDisplaySingleBox();
  frmvalidator.EnableMsgsTogether();
  frmvalidator.addValidation("name","req","Please enter your First Name");
  frmvalidator.addValidation("name","maxlen=20","Max length for First Name is 20");
  frmvalidator.addValidation("name","alpha","Alphabetic chars only for First Name");

  frmvalidator.addValidation("last","req","Please enter your Last Name");
  frmvalidator.addValidation("last","maxlen=20","Max length is 20");
  frmvalidator.addValidation("last","alpha","Alphabetic chars only for Last Name");

  frmvalidator.addValidation("mi","maxlen=2","Max length is 2");
  frmvalidator.addValidation("mi","alpha","Alphabetic chars only for Middle Initial");

  frmvalidator.addValidation("email","maxlen=50", "Max length is 50");
  frmvalidator.addValidation("email","req", "Please enter a email address");
  frmvalidator.addValidation("email","email", "Please enter a valid email address.");

  frmvalidator.addvalidation("hp","req", "Phone is required");
  frmvalidator.addValidation("hp","maxlen=10", "Max length is 10 You don't have to add () or any separators");
  frmvalidator.addValidation("hp","numeric","Numeric chars only");

  frmvalidator.addValidation("add","req","Please enter your home address");
  frmvalidator.addValidation("add","maxlen=20","Max length is 30");
  frmvalidator.addValidation("add","alpha","Alphabetic chars only");

  frmvalidator.addValidation("add2","maxlen=20","Max length is 30");
  frmvalidator.addValidation("add2","alpha","Alphabetic chars only");

  frmvalidator.addValidation("city","req","Please enter your City");
  frmvalidator.addValidation("city","maxlen=20","Max length is 20");
  frmvalidator.addValidation("city","alpha","Alphabetic chars only");

  frmvalidator.addValidation("state","req","Please enter your State");
  frmvalidator.addValidation("state","maxlen=2","Max length is 2 (example=KY)");
  frmvalidator.addValidation("state","alpha","Alphabetic chars only");

  frmvalidator.addValidation("zip","req","Please enter your Zip code");
  frmvalidator.addValidation("zip","maxlen=5","Max length is 5");
  frmvalidator.addValidation("zip","alpha","Alphabetic chars only");

  frmvalidator.addValidation("cp","maxlen=10","Max length for is 10");
  frmvalidator.addValidation("cp","numeric","Numeric chars only");

  frmvalidator.addValidation("work","maxlen=10","Max length for is 10");
  frmvalidator.addValidation("work","numeric","Numeric chars only");

  frmvalidator.addValidation("make1","req","Please enter the make of you vehicle");
  frmvalidator.addValidation("make1","maxlen=20","Max length for make is 20");
  frmvalidator.addValidation("make1","alpha","Alphabetic chars only");

  frmvalidator.addValidation("model1","req","Please enter the model of your vehicle");
  frmvalidator.addValidation("model1","maxlen=20","Max length is 20 for model");
  frmvalidator.addValidation("model1","alpha","Alphabetic chars only");

  frmvalidator.addValidation("color1","req","Color is required please fill in");
  frmvalidator.addValidation("color1","maxlen=10","Max length is 10");
  frmvalidator.addValidation("color1","alpha","Alphabetic chars only");

  frmvalidator.addValidation("plate1","maxlen=7", "Max length is 7 for Plate #");
  frmvalidator.addValidation("plate1","req", "Please enter your plate number");
  frmvalidator.addValidation("plate1","alnum_s", "Please enter a valid plate number XXX XXX");

  frmvalidator.addValidation("make2","req","Please enter the make of you vehicle");
  frmvalidator.addValidation("make2","maxlen=20","Max length for make is 20");
  frmvalidator.addValidation("make2","alpha","Alphabetic chars only");

  frmvalidator.addValidation("model2","req","Please enter the model of your vehicle");
  frmvalidator.addValidation("model2","maxlen=20","Max length is 20 for model");
  frmvalidator.addValidation("model2","alpha","Alphabetic chars only");

  frmvalidator.addValidation("color2","req","Color is required please fill in");
  frmvalidator.addValidation("color2","maxlen=10","Max length is 10");
  frmvalidator.addValidation("color2","alpha","Alphabetic chars only");

  frmvalidator.addValidation("plate2","maxlen=7", "Max length is 7 for Plate #");
  frmvalidator.addValidation("plate2","req", "Please enter your plate number");
  frmvalidator.addValidation("plate2","alnum_s", "Please enter a valid plate number XXX XXX");

  frmvalidator.addValidation("make3","req","Please enter the make of you vehicle");
  frmvalidator.addValidation("make3","maxlen=20","Max length for make is 20");
  frmvalidator.addValidation("make3","alpha","Alphabetic chars only");

  frmvalidator.addValidation("model3","req","Please enter the model of your vehicle");
  frmvalidator.addValidation("model3","maxlen=20","Max length is 20 for model");
  frmvalidator.addValidation("model3","alpha","Alphabetic chars only");

  frmvalidator.addValidation("color3","req","Color is required please fill in");
  frmvalidator.addValidation("color3","maxlen=10","Max length is 10");
  frmvalidator.addValidation("color3","alpha","Alphabetic chars only");

  frmvalidator.addValidation("plate3","maxlen=7", "Max length is 7 for Plate #");
  frmvalidator.addValidation("plate3","req", "Please enter your plate number");
  frmvalidator.addValidation("plate3","alnum_s", "Please enter a valid plate number XXX XXX");

function Validate()
{
    if (document.registration_form.password.value !=
    document.registration_form.password_confirm.value)
    {
        alert("The two passwords are not identical! "+
        "Please enter the same password again for confirmation");
        return false;
    }
    return true;
}
</script>
</div>
<!-- end #content --></div>

                        			<div id="rightmenu">
<ul>
<li><h2>Family Owned & Operated</h2></li>
<li><h2>Louisville, KY.</h2></li>
<li><h2>P502-807-3843</h2></li>
<li><h2>F502-416-0553</h2></li>
<li><h2>IN 812-624-5622</h2></li>
<li>
<li>
<img src="/Pictures/style/righttop.jpg" height="50" width="200" align="left" />
</li>
<li>
<ul>
<?php include("rightmenu.html"); ?>
</ul>
</li>
</ul>
    <img src="/Pictures/Ads/ad1.gif" alt="Internet Advertising Works. Advertise @ Beccas Towing" />

		</div>
		<!-- end #sidebar -->



</div>
</div>		<div style="clear: both;"> </div>
</div>
<div id="footer">
<?php include("footer.php"); ?>
</div>
<!-- end #footer -->
</div>
<!-- end #page -->
</div>
</body>
</html>

Thank You

johnsmith153 · October 13, 2009

What exactly do you want?

I doubt anyone is going to completely re-write your script for you.

Can you be more specific with a question?

Psycho · October 13, 2009

I see one problem with your current code. The onsubmit trigger is not using a "return". So, even if validation fails the form will still be submitted. It should look like this:

<form name="auto1" method="post" class="beccas" action="confirm.php" onsubmit="return returnValidate();">

The validation function should return a true/false based on whether validation passes and the "return" in the onsubmit trigger will submit or not submit the form accordingly. Personally, I would just name the function validate() or validateForm() plus I would pass the form object in the call like this

onsubmit="return validateForm(this);"

The function to validate just the three fields could be as simple as this:

function validateForm(formObj)
{
    if (!formObj.name.value || !formObj.last.value || !formObj.email.value)
    {
        //Validation failed
        alert('Name, Last and email are all required.');
        return false;
    }

    //Validation passed
    return true;
}

You can expand on that as much as you want to give more detailed errors or do more comprehensive validation, such as ensuring the email is properly formatted. But, with any JS validation it is only an "enhancement" of any server-side validatin that needs to be done.

Matthew Herren · October 14, 2009

I'm not asking anyone to re wright my code. Just give me a hint why it's not validating all my fields. Like i said it's only validating 3.

Thanks mjdamato

Sign In

Validation Help

Recommended Posts

Matthew Herren

Link to comment

Share on other sites

johnsmith153

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Matthew Herren

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information