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>