validation form project

**acoder** · Jan 30 '07, 10:47 AM

Check out the following link to get you started. If you get stuck post again.

An earlier thread with links to form validation tutorials

**jasonchan** · Jan 30 '07, 10:14 PM

yea i know i posted this earlier.. ive read up on it and still quite unfamiliar with the language.. i guess ill show u a snippet of the code when i figure out how to write it.

**acoder** · Jan 31 '07, 09:06 AM

If you're not familiar with Javascript, then perhaps you should go through a tutorial.

**jasonchan** · Feb 2 '07, 09:24 AM

Okay here is what I have now. I want to make the checkboxes indicate the value ="1" when clicked and value =" " (empty) when unclicked. So far I have managed to get the first step done but unsure as how to set it to an empty value when it is unclicked.

[HTML]<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validati on Form</title>

<script>

function checkValid()

{
if

(document.myFor m.ckbox1.checke d == false &&
document.myForm .ckbox2.checked == false &&
document.myForm .ckbox3.checked == false)

{
alert ("You didn't select any product");
return false;
}

else
{
return true;
}
}

</script>
</head>

<body bgcolor="#55555 5">

<form action="#" method="post" name="myForm" id="myForm" onsubmit="retur n checkValid();">
<table align="center" border="1">
<tr>
<td><input type="checkbox" id="ckbox1" name="ckbox1" onclick="docume nt.myForm.p1.va lue=1;" /> Product 1</td>
<td>@ 1.25 <input type="text" id="p1" name="p1" size="5" /> Quantity</td>
</tr>
<tr>
<td><input type="checkbox" id="ckbox2" name="ckbox2" /> Product 2</td>
<td>@ 2.25 <input type="text" id="p2" name="p2" size="5" /> Quantity</td>
</tr>
<tr>
<td><input type="checkbox" id="ckbox3" name="ckbox3" /> Product3</td>
<td>@ 3.25 <input type="text" id="p3" name="p3" size="5" /> Quantity</td>

</tr>
<tr>
<td>Ship to:</td>
<td>
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city" /></td>
</tr>
<tr>
<td>State:</td>
<td>
<select>
<option value="">--Select State--</option>
<option value="AL">Alab ama</option>
<option value="AK">Alas ka</option>
<option value="AZ">Ariz ona</option>
<option value="AR">Arka nsas</option>
<option value="CA">Cali fornia</option>
<option value="CO">Colo rado</option>
<option value="CT">Conn ecticut</option>
<option value="DE">Dela ware</option>
<option value="FL">Flor ida</option>
<option value="GA">Geor gia</option>
<option value="HI">Hawa ii</option>
<option value="ID">Idah o</option>
<option value="IL">Illi nois</option>
<option value="IN">Indi ana</option>
<option value="IA">Iowa </option>
<option value="KS">Kans as</option>
<option value="KY">Kent ucky</option>
<option value="LA">Loui siana</option>
<option value="ME">Main e</option>
<option value="MD">Mary land</option>
<option value="MA">Mass achusetts</option>
<option value="MI">Mich igan</option>
<option value="MN">Minn esota</option>
<option value="MS">Miss issippi</option>
<option value="MO">Miss ouri</option>
<option value="MT">Mont ana</option>
<option value="NE">Nebr aska</option>
<option value="NV">Neva da</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">Nort h Carolina</option>
<option value="ND">Nort h Dakota</option>
<option value="OH">Ohio </option>
<option value="OK">Okla homa</option>
<option value="OR">Oreg on</option>
<option value="PA">Penn sylvania</option>
<option value="PR">Puer to Rico</option>
<option value="RI">Rhod e Island</option>
<option value="SC">Sout h Carolina</option>
<option value="SD">Sout h Dakota</option>
<option value="TN">Tenn essee</option>
<option value="TX">Texa s</option>
<option value="UT">Utah </option>
<option value="VT">Verm ont</option>
<option value="VA">Virg inia</option>
<option value="WA">Wash ington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisc onsin</option>
<option value="WY">Wyom ing</option>
</select>
</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text" name="zip" id="zip" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Shipping: </td>
<td>
<select>
<option value="standard ">Standard</option>
<option value="2-3 days">2-3 days</option>
<option value="Overnigh t">Overnight </option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="subtotal " name="subtotal" id="subtotal" /></td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td><input type="radio" name="mc" id="mc" />MasterCard</td>
<td rowspan="2">
<input type="text" name="total" id="total" />
</td>
</tr>
<tr>
<td><input type="radio" name="visa" id="visa" />Visa</td>
</tr>
<tr>
<td><input type="submit" name="submit" id="submit" value="submit" /></td>
<td><input type="reset" name="reset" id="reset" value="reset" /></td>
</table>
</form>

</body>
</html>[/HTML]

**acoder** · Feb 2 '07, 10:09 AM

Add the following function:

Code:

function setVal(chkd, num) {
var val = "";
if (chkd) val = 1;
document.myForm["p"+num].value = val;
}

It sets the val to empty assuming that it's not checked. Then checks for chkd value. If checked, changes val to 1. Finally, set the p1 (or p2/p3/whatever) to the value. If you need more explanation, post again.

To call the function, in your onclick call:

Code:

onclick="setVal(this.checked,1);"

this.checked takes the checked property of the checkbox. Also, pass 1,2 or 3 depending on the number of the checkbox to determine which text box to set.

Hope that helps.

**senaka** · Feb 2 '07, 12:18 PM

jasonchan,

you mean you need a required field validator is it? that means if @least one of what you require is not filled your form must not get submitted. Is that what you want?

Rgds.

**jasonchan** · Feb 11 '07, 08:43 AM

Originally posted by senaka

jasonchan,

you mean you need a required field validator is it? that means if @least one of what you require is not filled your form must not get submitted. Is that what you want?

Rgds.

yea thats what i wanted... i think acoder helped a lot with that code. thanks again..

i also want to embed a validation function for the main verify function but it doesnt seem to work at all.

This is what i got:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validation Form</title>

<script>


var s = false;

function verify(form) {

/* At least one product checkbox needs to be checked */

  if 	
    
	(document.myForm.ckbox1.checked == false &&
	document.myForm.ckbox2.checked == false &&
	document.myForm.ckbox3.checked == false)

	{
		alert ("You didn't select any product");
		return false;
	}





function validateZIP( document.myForm.zip.value) {

var valid = "0123456789-";
var hyphencount = 0;

if (document.myForm.zip.value.length!=5 && document.myForm.zip.value.length!=10) {
alert("Please enter your 5 digit or 5 digit+4 zip code.");
return false;
}
for (var i=0; i < document.myForm.zip.value.length; i++) {
temp = "" + field.substring(i, i+1);
if (temp == "-") hyphencount++;
if (valid.indexOf(temp) == "-1") {
alert("Invalid characters in your zip code.  Please try again.");
return false;
}
if ((hyphencount > 1) || ((document.myForm.zip.value.length==10) && ""+document.myForm.zip.value.charAt(5)!="-")) {
alert("The hyphen character should be used with a properly formatted 5 digit+four zip code, like '12345-6789'.   Please try again.");
return false;
   }
}
return true;
}




/* VALID PHONE NUMBER */

	// Declaring required variables
	var digits = "0123456789";
	// non-digit characters which are allowed in phone numbers
	var phoneNumberDelimiters = "()- ";
	// characters which are allowed in international phone numbers
	// (a leading + is OK)
	var validWorldPhoneChars = phoneNumberDelimiters + "+";
	// Minimum no of digits in an international phone no.
	var minDigitsInIPhoneNumber = 10;

	function isInteger(s)
	{   var i;
	    for (i = 0; i < s.length; i++)
	    {   

        // Check that current character is number.
	        var c = s.charAt(i);
	        if (((c < "0") || (c > "9"))) return false;
	    }
	    // All characters are numbers.
	    return true;
	}

	function stripCharsInBag(s, bag)
	{   var i;
	    var returnString = "";
	    // Search through string's characters one by one.
	    // If character is not in bag, append to returnString.
	    for (i = 0; i < s.length; i++)
	    {   
	        // Check that current character isn't whitespace.
	        var c = s.charAt(i);
	        if (bag.indexOf(c) == -1) returnString += c;
	    }
	    return returnString;
	}
	
	function checkInternationalPhone(strPhone){
	s=stripCharsInBag(strPhone,validWorldPhoneChars);
	return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
	}



	var Phone=document.myForm.phonenumber
	
	if ((Phone.value==null)||(Phone.value=="")){
		alert("Please Enter your Phone Number")
		Phone.focus()
		return false
	}
	if (checkInternationalPhone(Phone.value)==false){
		alert("Please Enter a Valid Phone Number")
		Phone.value=""
		Phone.focus()
		return false
	}

/* END OF VALID PHONE */



  if(document.myForm.email.value == "") 

	{
    alert("Please enter an email");
    return false;
  }



/* VALID EMAIL? */

function IsEmailValid(FormName)

{
        var EmailOk  = true
        var Temp     = FormName;
        var AtSym    = Temp.value.indexOf('@')
        var Period   = Temp.value.lastIndexOf('.')
        var Space    = Temp.value.indexOf(' ')
        var Length   = Temp.value.length - 1   // Array is from 0 to length-1

        if ((AtSym < 1) ||                     // '@' cannot be in first position
    (Period <= AtSym+1) ||             // Must be atleast one valid char btwn '@' and '.'
    (Period == Length ) ||             // Must be atleast one valid char after '.'
    (Space  != -1))                    // No empty spaces permitted
  {
      EmailOk = false
      Temp.focus()
  }
        return EmailOk
}



  if (IsEmailValid(document.myForm.email) == false) {
    alert("Please enter a valid email address");
    return false;
  }

/* END OF VALID EMAIL */


    if(document.myForm.shipping.value == "") {
    alert("Please select a shipping option");
    return false;
  }



  if(document.myForm.creditcard.value == "") {
    alert("Please enter a zip code");
    return false;
  }




  s = true;
  return true;

}

</script>
</head>

<body bgcolor="#555555">


<form action="thankyou.html" method="post" name="myForm" id="myForm" onsubmit="return verify(this);">
<table align="center" border="1">
  <tr>
    <td><input type="checkbox" id="ckbox1" name="ckbox1" onclick="checkboxClick(this); Calc();" /> Product 1</td>
    <td>@ 1.25 <input type="text" id="p1" name="p1" size="5" value="0" onchange="Calc();" onkeypress="return isNumberInput(this, event);" /> Quantity</td>

  </tr>
  <tr>
    <td><input type="checkbox" id="ckbox2" name="ckbox2" onclick="checkboxClick(this); Calc();" /> Product 2</td>
    <td>@ 2.25 <input type="text" id="p2" name="p2" size="5" value="0" onchange="Calc();" onkeypress="return isNumberInput(this, event);" /> Quantity</td>
  </tr>
 <tr>

    <td><input type="checkbox" id="ckbox3" name="ckbox3" onclick="checkboxClick(this); Calc();" /> Product3</td>
    <td>@ 3.25 <input type="text" id="p3" name="p3" size="5" value="0" onchange="Calc();" onkeypress="return isNumberInput(this, event);" /> Quantity</td>
 
  </tr>
  <tr>
  <td>Ship to:</td>
  <td>

  <table border="1">
    <tr>
      <td>Name:</td>
      <td><input type="text" name="name" id="name" /></td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><input type="text" name="address" id="address" /></td>

    </tr>
    <tr>
      <td>City:</td>
      <td><input type="text" name="city" id="city" /></td>
    </tr>
    <tr>
      <td>State:</td>
      <td>

	  <select name="state" id="state" >
	    <option value="">--Select State--</option>
		<option value="AL">AL</option>
		<option value="AK">AK</option>
		<option value="AZ">AZ</option>
		<option value="AR">AR</option>

		<option value="CA">CA</option>
		<option value="CO">CO</option>
		<option value="CT">CT</option>
		<option value="DE">DE</option>
		<option value="FL">FL</option>
		<option value="GA">GA</option>

		<option value="HI">HI</option>
		<option value="ID">ID</option>
		<option value="IL">IL</option>
		<option value="IN">IN</option>
		<option value="IA">IA</option>
		<option value="KS">KS</option>

		<option value="KY">KY</option>
		<option value="LA">LA</option>
		<option value="ME">ME</option>
		<option value="MD">MD</option>
		<option value="MA">MA</option>
		<option value="MI">MI</option>

		<option value="MN">MN</option>
		<option value="MS">MS</option>
		<option value="MO">MO</option>
		<option value="MT">MT</option>
		<option value="NE">NE</option>
		<option value="NV">NV</option>

		<option value="NH">NH</option>
		<option value="NJ">NJ</option>
		<option value="NM">NM</option>
		<option value="NY">NY</option>
		<option value="NC">NC</option>
		<option value="ND">ND</option>

		<option value="OH">OH</option>
		<option value="OK">OK</option>
		<option value="OR">OR</option>
		<option value="PA">PA</option>
		<option value="PR">PR</option>
		<option value="RI">RI</option>

		<option value="SC">SC</option>
		<option value="SD">SD</option>
		<option value="TN">TN</option>
		<option value="TX">TX</option>
		<option value="UT">UT</option>
		<option value="VT">VT</option>

		<option value="VA">VA</option>
		<option value="WA">WA</option>
		<option value="WV">WV</option>
		<option value="WI">WI</option>
		<option value="WY">WY</option>
	  </select>

	  </td>
    </tr>
    <tr>
      <td>Zip:</td>
      <td><input type="text" name="zip" id="zip" /></td>
    </tr>
    <tr>
      <td>Phone:</td>

      <td><input type="text" name="phonenumber" id="phonenumber" /></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><input type="text" name="email" id="email" /></td>
    </tr>
  </table>
  </td>

  </tr>
  <tr>
  <td>Shipping:</td>
  <td>
   Standard @ $3.50: <input type="radio" value="3.50" name="shipping" id="shipping" checked="true" onclick="Calc(this);" />
   2-day @ $5.00: <input type="radio" value="5.00" name="shipping" id="shipping" onclick="Calc(this);" />
   Overnight @ $7.50: <input type="radio" value="7.50" name="shipping" id="shipping" onclick="Calc(this);" />
  </td>
  </tr>
  <tr>
  <td><input type="button" value="subtotal" name="sub" id="sub" onclick="Calc(this);" /></td>
  <td><input type="text" name="subtotal" id="subtotal" readonly="readonly" /></td>

  </tr>
  <tr>
  	<td><input type="radio" value="mc" name="creditcard" id="creditcard" checked="true" />MasterCard</td>
	<td rowspan="2">
	Please input your credit card number below:<br />
	<input type="text" name="cardnum" id="cardnum" />
	</td>
   </tr>
   <tr>

   <td><input type="radio" value="visa" name="creditcard" id="creditcard" />Visa</td>
   </tr>
   <tr>
   <td><input type="submit" name="submit" id="submit" value="submit" /></td>
   <td><input type="reset" name="reset" id="reset" value="reset" /></td>	
</table>
</form>

</body>
</html>

**jasonchan** · Feb 11 '07, 08:44 AM

btw i had to take out some parts of the code above bc it was too long to display .. so basically i want to include the validation zip in the original file. any help would be appreciated..th anks again

**acoder** · Feb 12 '07, 07:18 PM

You can't declare functions within functions as you have done.

Declare all functions outside then call these within the main verify function.

validation form project

validation form project

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment