validation form project

im fairly new at javascript but i need to write a script for a project and don't know where to begin. basically it involves form validation... i guess here's the breakdown.

I have created a form in html already and need to figure out how to write this script.

1.
select any number of products (checkboxes) and set quantities for each. Must set at least one product and selected products must have a quantity value > 0.

2. The second portion involves shipping information (ie. Name, Address, City, State, Zip, phone number, and email).
The fields must all be filled in. The state must be a valid state code (two letters). The phone number must be all digits and 10 digits. The email must be formed at least like x@y.

3. i then need to have a subtotal of the items, based on how many were selected and such.

any help would be greatly appreciated,
thanks in advance.

Jan 30 '07 #1

Subscribe Post Reply

1608

acoder

16,027

Expert Mod 8TB

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

An earlier thread with links to form validation tutorials

Jan 30 '07 #2

jasonchan

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.

Jan 30 '07 #3

acoder

16,027

Expert Mod 8TB

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

Jan 31 '07 #4

jasonchan

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>Validation Form</title>

<script>

function checkValid()

{
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;
}

else
{
return true;
}
}

</script>
</head>

<body bgcolor="#555555">

<form action="#" method="post" name="myForm" id="myForm" onsubmit="return checkValid();">
<table align="center" border="1">
<tr>
<td><input type="checkbox" id="ckbox1" name="ckbox1" onclick="document.myForm.p1.value=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">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</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">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</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="Overnight">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]

Feb 2 '07 #5

acoder

16,027

Expert Mod 8TB

Add the following function:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

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.

Feb 2 '07 #6

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.

Feb 2 '07 #7

jasonchan

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:

Expand|Select|Wrap|Line Numbers

  
<!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>

Feb 11 '07 #8

jasonchan

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..thanks again

Feb 11 '07 #9

acoder

16,027

Expert Mod 8TB

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

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

Feb 12 '07 #10

Similar topics

web form input validation

by: John Slate | last post by:

I have built a simple web form that uses input validation. I use the EnableClientScript option to produce a javascript alert box when input errors occur. The only validation is a password...

C# / C Sharp

Error in Validation

by: Shathish | last post by:

Ha i have this problem with the validation control I have a asp.net page which is used to add and edit projects when i'm adding a project the validation controls are working fin but if i select a...

ASP.NET

Required Validation Error in IE.

by: Ryan Ternier | last post by:

We're running a site that has required field validation on the login page. It works fine on our development / test machines. However, when I upload this site to our live server i get this error. ...

ASP.NET

Submit Button with Validation Controls not working

by: AnandaSim | last post by:

Hi All, A really puzzling phenomenon. I develop to a Windows 2000 development server in VS 2003. I use Copy Project to deploy the project to a production server. The webpage I'm having...

ASP.NET

validation

by: JFB | last post by:

Hi Folks, I have a lot of forms and I want to validate de data for text, numbers, phone numbers, email and zipcode How is the best way to perform a validation in all the forms using vb.net? Can I...

Visual Basic .NET

Form validation with PHP/Javascript

by: Chris | last post by:

Hi, I have a form for uploading documents and inserting the data into a mysql db. I would like to validate the form. I have tried a couple of Javascript form validation functions, but it...

PHP

creating dynamic Excel forms, w/ validation -- possible?

by: matt | last post by:

hello, i am on an interesting project. in this project, i have to create dynamic data-entry forms for offline-users to fill out, save locally, and eventually postback to our app (when back...

ASP.NET

Data Validation

by: cwby1966 | last post by:

I am Trying to validate information entered into 4 fields on a form. They can not be empty. If one of the fields is empty then the code should give a message athen stop. If all fields are valid then...

Microsoft Access / VBA

asp.net validation controls not showing error message in Windows 2003with IIS 6.0

by: nRk | last post by:

Hi, I am working on asp.net 2.0 with Visual Studio 2005. My asp.net project contains one Masterpage. I exposed my asp.net project in my machine (Windows XP with IIS 5.1) and access using...

ASP.NET

How to exit a form validation function so that the form isn'tsubmitted

by: Andrew Falanga | last post by:

HI, Just a warning, I'm a javascript neophyte. I'm writing a function to validate the contents of a form on a web page I'm developing. Since I'm a neophyte, this function is quite simple at...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA