Form Validation

Validating a form w/alert window

Page 1 of 1

1 Replies - 1079 Views - Last Post: 17 October 2009 - 04:53 AM

#1 JDUenas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 14-May 09

Form Validation

Posted 17 October 2009 - 03:56 AM

I am trying to:
Create a cross-browser (works in Firefox and MS IE) input screen that takes in a client’s information for an order:
Full Name (text field)
Address (textarea)
Gender (radio button)
Date of birth (three dropdown lists – day, month, year)
“Send me newsletter” (checkbox)
Hidden total value for order (hidden field)
“Submit Order” button (button).

I need help with the following:
-When the user is done with input, validate using the rules below:
-At least 3 characters required in name
-Must be over 18 years old
-Gender must be selected
-If validation passes, show the information in an alert box and write ‘Your order has been submitted’. Otherwise, alert the user with the appropriate validation error and set focus on the input field that failed validation.

Bellow is what I have so far. Please Help!!!






<!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" lang="en" xml:lang="en">

<head>
	<title>Assignment 5</title>
</head>

<body>
	<h1> Order Form </h1>
	
<form action="alert( )">

Full Name:<input type="text" name="first" size="30" maxlength="30" /><br />
Address:<br />                
		<textarea name="addr" cols="30" rows="5"></textarea><br /><br />
Gender: <input type="radio"value="m" name="gender" checked="checked" />Male    
<input type="radio"value="f" name="gender" />Female    <br />
Date of Birth: <select name="date">
					<option value="01" selected="selected">01</option>
					<option value="02">02</option>
					<option value="03">03</option>
					<option value="04">04</option>
					<option value="05">05</option>
					<option value="06">06</option>
					<option value="07">07</option>
					<option value="08">08</option>
					<option value="09">09</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					</select>    
				<select name="date">
					<option value="01" selected="selected">01</option>
					<option value="02">02</option>
					<option value="03">03</option>
					<option value="04">04</option>
					<option value="05">05</option>
					<option value="06">06</option>
					<option value="07">07</option>
					<option value="08">08</option>
					<option value="09">09</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
					</select>    
				<select name="date">
					<option value="1960">1960</option>
					<option value="1961">1961</option>
					<option value="1962">1962</option>
					<option value="1963">1963</option>
					<option value="1964">1964</option>
					<option value="1965">1965</option>
					<option value="1966">1966</option>
					<option value="1967">1967</option>
					<option value="1968">1968</option>
					<option value="1969">1969</option>	
					<option value="1970">1970</option>
					<option value="1971">1971</option>
					<option value="1972">1972</option>
					<option value="1973">1973</option>
					<option value="1974">1974</option>
					<option value="1975">1975</option>
					<option value="1976">1976</option>
					<option value="1977">1977</option>
					<option value="1978">1978</option>
					<option value="1979">1979</option>					
					<option value="1980">1980</option>
					<option value="1981">1981</option>
					<option value="1982">1982</option>
					<option value="1983">1983</option>
					<option value="1984">1984</option>
					<option value="1985">1985</option>
					<option value="1986">1986</option>
					<option value="1987">1987</option>
					<option value="1988">1988</option>
					<option value="1989">1989</option>
					<option value="1990">1990</option>
					<option value="1991" selected="selected">01</option>
				</select>
				

<br /><br />
<input type="checkbox" name="letter" value="Y" checked="checked" />
Send me newsletter
<br /><br />
<input type="hidden" name="value" value="120" />

<input type="submit" />
</form>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Form Validation

#2 nadunx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 13-September 09

Re: Form Validation

Posted 17 October 2009 - 04:53 AM

hello,

since you haven't provided the code you tried I'll guide you on what to do to validate your form,

you dont need to validate the radio buttons because one of them is already selected when loading the page.

you must specify id attributes for all the controls you need to validate with the javascript . set ids for the name box and the selection box that displayes years.

in javascript function use the getElementById() method to get references to both above mentioned controls and in a if-condition check whether the length of the name box value >= 3 .

And if that is true then again *get the current year with javascript and substract the selected value of the selection group (year) from it . then you will have the age. then you can proceed to neccessory checking.

use boolean return value for the function you wrting. return true if all validations are passed and return false if it fails.

you need to call this method on the form's onsubmit event and in their use it like this -- > "return validateFunc();false" .. use google to find how to set focus on a desired control.

give it a try and show us your code :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1