Javascript validation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Javascript validation

Post by Luke »

I am using some simple javascript validation, but when i submit the form, it shows my error for a split second, but then goes immediately to the action page:

Code: Select all

<form name="tee_time_reservations" id="tee_time_reservations" method="POST" onsubmit="return validateOnSubmit()" action="/cgi-t/form.cgi">
The javascript replaces text next to each invalid field to red so the user knows it's an invalid input, but you only get to see it for a second before you are redirected to /cgi-t/form.cgi. What do i do??
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

return false from validateOnSubmit()
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

didn't work... still sits at correct screen for a minute and then goes to the action page.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Code: Select all

<SCRIPT language="javscript" TYPE="text/javascript">
// Only script specific to this form goes here.
// General-purpose routines are in a separate file.
  function validateOnSubmit() {
    var elem;
    var errs=0;
    // execute all element validations in reverse order, so focus gets
    // set to the first one in error.
    if (!validateTelnr  (document.forms.tee_time_reservations.phone, 'inf_telnr', true)) errs += 1; 
    if (!validateEmail  (document.forms.tee_time_reservations.email, 'inf_email', true)) errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.realname,  'inf_from'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.address,  'inf_addr'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.city,  'inf_city'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.state,  'inf_stat'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.zip,  'inf_zip'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.month,  'inf_month'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.day,  'inf_day'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.time,  'inf_time'))        errs += 1; 
    if (!validatePresent(document.forms.tee_time_reservations.players,  'inf_plrs'))        errs += 1; 

    if (errs>1)  alert('There are fields which need correction before sending');
    if (errs==1) alert('There is a field which needs correction before sending');
	
    return (errs==0);
  };
</SCRIPT>




<form name="tee_time_reservations" method="POST" onsubmit="return validateOnSubmit()" action="/cgi-t/form.cgi">

 <table width="500">
 <tr>
  <td class="head" colspan="3">Tee Time Reservation Form</td>
 </tr>
 <tr>
  <td class="V10" colspan="3"><p>To request a tee time, please complete and submit the following form. If you are requesting a tee time for <em>Memorial Day Weekend, 4th of July, or Labor Day weekend,</em> please call the golf shop directly at: 530-259-GOLF (4653)</p>
    <p>*Required Field </p></td>
 </tr>
  <tr>
   <td class="V10" align="right">*Full Name</td>
   <td><input type='text' name='realname' id='realname' onchange="validatePresent(this, 'inf_from');" value='' size='20'></td><td id="inf_from" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
  </tr>
  <tr>
   <td class="V10" align="right">*Address</td>
   <td><input type='text' name='address' id='address' onchange="validatePresent(this, 'inf_addr');" value='' size='20'></td><td id="inf_addr" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
  </tr>
  <tr>
   <td class="V10" align="right">*City</td>
   <td><input type='text' name='city' id='city' value='' onchange="validatePresent(this, 'inf_city');" size='20'></td><td id="inf_city" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
  </tr>
  <tr>
   <td class="V10" align="right">*State/Prov</td>
   <td><select name='state' id='state'>
        <option value="">Select One</option>
        <option value="AE">AE</option>
        <option value="AK">AK</option>
        <option value="AL">AL</option>
        <option value="AP">AP</option>
        <option value="AR">AR</option>
        <option value="AS">AS</option>
        <option value="AZ">AZ</option>
        <option value="CA">CA</option>
        <option value="CO">CO</option>
        <option value="CT">CT</option>
        <option value="DC">DC</option>
        <option value="DE">DE</option>
        <option value="FL">FL</option>
        <option value="FM">FM</option>
        <option value="GA">GA</option>
        <option value="GU">GU</option>
        <option value="HI">HI</option>
        <option value="IA">IA</option>
        <option value="ID">ID</option>
        <option value="IL">IL</option>
        <option value="IN">IN</option>
        <option value="KS">KS</option>
        <option value="KY">KY</option>
        <option value="LA">LA</option>
        <option value="MA">MA</option>
        <option value="MD">MD</option>
        <option value="ME">ME</option>
        <option value="MH">MH</option>
        <option value="MI">MI</option>
        <option value="MN">MN</option>
        <option value="MP">MP</option>
        <option value="MO">MO</option>
        <option value="MS">MS</option>
        <option value="MT">MT</option>
        <option value="NC">NC</option>
        <option value="ND">ND</option>
        <option value="NE">NE</option>
        <option value="NH">NH</option>
        <option value="NJ">NJ</option>
        <option value="NM">NM</option>
        <option value="NV">NV</option>
        <option value="KY">NY</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="PW">PW</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="VA">VA</option>
        <option value="VI">VI</option>
        <option value="VT">VT</option>
        <option value="WA">WA</option>
        <option value="WI">WI</option>
        <option value="WV">WV</option>
        <option value="WY">WY</option>
        <option value="AB">AB</option>
        <option value="BC">BC</option>
        <option value="MB">MB</option>
        <option value="NB">NB</option>
        <option value="NF">NF</option>
        <option value="NT">NT</option>
        <option value="NS">NS</option>
        <option value="ON">ON</option>
        <option value="PE">PE</option>
        <option value="QC">QC</option>
        <option value="SK">SK</option>
        <option value="ST">ST</option>
        <option value="YT">YT</option>
        <option value="Other">Other</option>
	   </select>
	  </td><td id="inf_stat" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
    </tr>
     <tr>
      <td class="V10" align="right">*Zip/Postal Code</td>
      <td><input type='text' name='zip' id='zip' onchange="validatePresent(this, 'inf_zip');" value='' size='7'></td><td id="inf_zip" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">*Phone</td>
      <td><input type='text' name='phone' id='phone' onchange="validateTelnr(this, 'inf_phon', true);" value='' size='20'></td><td  id="inf_telnr" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">Fax</td>
      <td><input type='text' name='fax' id='fax' onchange="validateTelnr(this, 'inf_fax', false);" value='' size='20'></td><td id="inf_fax" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">*E-mail</td>
      <td><input type='text' name='email' id='email' onchange="validateEmail(this, 'inf_email', true);" value='' size='20'></td><td id="inf_email" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">*Month</td>
      <td>
	   <select size='1' name='month' id='month'>
        <option value="">Select One</option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
       </select>
	  </td><td id="inf_from" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">*Day</td>
      <td>
       <select size='1' name='day' id='day'>
        <option value="">Select One</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</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>
	  </td><td id="inf_month" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">*Time of Day</td>
      <td>
	   <select size='1' name='time' id='time'>
        <option value="">Select One</option>
        <option value="Morning">Morning</option>
        <option value="Mid Day">Mid Day (after 1pm)</option>
        <option value="Twilight">Twilight (after 4pm)</option>
	   </select>
	  </td><td id="inf_time" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
      <td class="V10" align="right">*Number of Players</td>
      <td><input type='text' name='players' id='players' value='' size='6'></td><td id="inf_plrs" style="color: #c00; font-weight: bold; color: white">&nbsp;</td>
     </tr>
     <tr>
       <td height="26" align="right" class="V10">&nbsp;</td>
       <td colspan="2"><input type='submit' name="Submit" value='Submit'></td>
     </tr>
  </table>
</form>
Post Reply