locked
validating form with javascript -only allow alpha characters plus one space and ' RRS feed

  • General discussion

  • This is a copy of the full source code for my form.  I had it working and an error message was coming up if there was no input for surname.  When I added the code to only allow for alpha characters and input numerals into the surname the submit button took it straight to action with no error message.

    I am new to javascript and form vailidation.  I would be very grateful if you would help please.

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>applicenqfrm</title>
    <link href="mystyles.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script language="JavaScript" type="text/JavaScript">
    function validateForm()
    {
     
    ErrorText= "";
    if ( myForm.attendyn.selectedIndex == 0 ) { alert ( "Please select your Attendance." ); return false; }
    if (ErrorText= "") { form.submit() }
     
    ErrorText= "";
    if ( myForm.session.selectedIndex == 0 ) { alert ( "Please select your Session." ); return false; }
    if (ErrorText= "") { form.submit() }

    ErrorText= "";
    if ( myForm.people.selectedIndex == 0 ) { alert ( "Please select number of Attendees" ); return false; }
    if (ErrorText= "") { form.submit() }
     
    var x = document.forms["myForm"]["lastname"].value;
    x = x.replace(/^\s+|\s+$/g,""); // strip all leading and trailing spaces
    x = x.replace(/\s{2,}/g," "); // replace multiple spaces with one space
    if (x.length < 2) {
    alert("Last name must be filled out");
    setTimeout('document.forms["myForm"]["lastname"].focus()', 25); // refocus on it
    return false;
    }
    if (/[^a-z\s\-\']/gi.test (x)) { // only letters space hyphen apostophe allowed - Smith-Jones O'Flanaghan
    alert ("You may only enter letters, space, hyphen, apostrophe");
    document.forms["myForm"]["lastname"].value = ""; // clear the field
    setTimeout('document.forms["myForm"]["lastname"].focus()', 25); // and refocus on it
    return false;
    }
    x = x.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()}); // format with capitals
    document.forms["myForm"]["lastname"].value = x;
    }

    var x=document.forms["myForm"]["firstname"].value
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
     
    var x=document.forms["myForm"]["address"].value
    if (x==null || x=="")
      {
      alert("Address must be filled out");
      return false;
      }
     
    var x=document.forms["myForm"]["suburb"].value
    if (x==null || x=="")
      {
      alert("Suburb must be filled out");
      return false;
      }
     
    ErrorText= "";
    if ( myForm.state.selectedIndex == 0 ) { alert ( "Please select your State." ); return false; }
    if (ErrorText= "") { form.submit() }

    var x=document.forms["myForm"]["postcode"].value
    if (x==null || x=="")
       {
          alert("Postcode must be filled out")
          return false;
       }
       if (!IsNumeric(x))
       {
          alert("Please enter only numbers in the Postcode field")
          return false;
       }
     
    var x=document.forms["myForm"]["wphone"].value
    if (x==null || x=="")
       {
          alert("Work Phone must be filled out")
          return false;
       }
       if (!IsNumeric(x))
       {
          alert("Please enter only numbers in the Work Phone field")
          return false;
       }

    var x=document.forms["myForm"]["email"].value
    if (x==null || x=="")
      {
      alert("Email must be filled out");
      return false;
      } else {
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
      alert("Not a valid e-mail address");
      return false;
      }
    }

    var x=document.forms["myForm"]["organisation"].value
    if (x==null || x=="")
      {
      alert("Organisation must be filled out");
      return false;
      }

    var x=document.forms["myForm"]["thepassword"].value
    if (x==null || x=="")
      {
      alert("Password must be filled out");
      return false;
      }

    function IsNumeric(sText)
    {
       var ValidChars = "0123456789.";
       var IsNumber=true;
       var Char;

     
       for (i = 0; i < sText.length && IsNumber == true; i++)
          {
          Char = sText.charAt(i);
          if (ValidChars.indexOf(Char) == -1)
             {
             IsNumber = false;
             }
          }
       return IsNumber;
       }
    }
    </script>
    <META name=GENERATOR content="MSHTML 8.00.6001.18999">
    </head>

    <body>
    <table width="100%" border="4" class="headerborder">
     <!--This table depicts the graphics of Logo and the M Russo with the name of company in the centre-->
        <TBODY>
      
      <tr>
       <th width="36%"> <img src="images/logogtb.jpg" alt="logogtb"> </th>
       <th width="40%">  <h1>GTB Financial solutions</h1> </th>
       <th width="24%"> <p>Morris Russo
       <br>
        Marketing Director
        <br>
        <br>
        <img SRC="images/manager.jpg" alt="Mr Morris Russo"
        title="Mr Morris Russo"> </p>
        GTB Financial Solutions</th>
      </tr></TBODY>
     </table>

     <table width="100%" border="4" cellpadding="1" cellspacing="10">
        <tr>
       <th align = "center"> <a href="index.htm">Home</a></th>
          <th align = "center"> <a href="aboutus.htm">About the Company</a></th>
          <th align = "center"> <a href="timetable.htm">To the Timetable page</a> </th>
         
          <th align = "center"> <a href="contactus.htm">Contact us</a> </th>
          <th align = "center"> <a href="applicenqfrm.htm">Application Form</a> </th>
      </tr>
     </table>
     <p></p>
    <form name="myForm"  action="" method="post" onsumbit="return validateForm()"  enctype="multipart/form-data" id="myForm">
       <p></p>
       <table width="100%" cellspacing="10" cellpadding="1">
    <TBODY>
        <tr>
          <td  colspan="2" align="center"><strong>APPLICATION/ENQUIRY FORM FOR THE GTB CONFERENCE TO BE HELD JUNE 2006 </strong></td></tr>
     
     
      <tr>
      <td colspan="2" align="center" style="color:red"><b>&nbsp;*&nbsp;</b> means you must fill in the details</td></tr>
      <tr>
       <td  align="right"><strong>*  I/we would like to attend the GTB conference being held in June 2006</strong></td>
      
       <td colspan="2" align="left">
       <select name="attendyn">
        <option value="" selected></option>
            <option value="y">YES</option>
            <option value="n">NO</option>
           </select></td></tr>
      
        <tr>
          <td align="right"><strong>*  I/we would like to attend the following sessions (choose one option only):</strong></td>
     
          <td colspan="2" align="left"><select name="session">
       <option value="" selected></option>
            <option value="a">AM</option>
            <option value="p">PM</option>
            <option value="ap">AM and PM</option>
            <option value="nil">NONE</option>
          </select></td></tr>
     
     <tr>
          <td align="right"><strong>*  Number of attendees</strong></td>
     
     
          <td colspan="2" align="left"> <select name="people">
            <option value="" selected ></option>
            <option value="0">0</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>
          </select></td>
       </tr>
     
        <tr>
          <td colspan="2" align="center"><strong>Personal Details:</strong></td>
        </tr>
       <tr>
          <td align="right"><strong>* Last Name</strong></td>
          <td><input name="lastname" type="text" id="lastname"></td>
        </tr>
        <tr>
          <td align="right"><strong>* First Name</strong></td>
          <td><input name="firstname" type="text" id="firstname"></td>
        </tr>
        <tr>
          <td align="right"><strong>* Address</strong></td>
          <td><input name="address" type="text" id="address"></td>
        </tr>
        <tr>
          <td align="right"><strong>* Suburb</strong></td>
          <td><input name="town" type="text" id="suburb"></td>
        </tr>
        <tr>
          <td align="right"><strong>* State</strong></td>
          <td><select name="state">
       <option value="" selected></option>
            <option value="NSW">NSW</option>
            <option value="QLD">QLD</option>
            <option value="ACT">ACT</option>
            <option value="VIC">VIC</option>
            <option value="WA">WA</option>
            <option value="SA">SA</option>
            <option value="NT">NT</option>
            <option value="TAS">TAS</option>
          </select></td>
        </tr>
        <tr>
          <td align="right"><strong>* Postcode</strong></td>
          <td><input name="postcode" type="text" id="postcode" ></td>
        </tr>
        <tr>
          <td align="right"><strong>Home Phone</strong></td>
          <td><input name="hphone" type="text" id="hphone"></td>
        </tr>
       <tr>
          <td align="right"><strong>* Work Phone</strong></td>
          <td><input name="wphone" type="text" id="wphone"></td>
        </tr>
        <tr>
          <td align="right"><strong>Fax</strong></td>
          <td><input name="fax" type="text" id="fax"></td>
        </tr>
        <tr>
          <td align="right"><strong>* Email</strong></td>
          <td><input name="email" type="text" id="email" size="35" maxlength="35"></td>
        </tr>
        <tr>
          <td align="right"><strong>* Organisation</strong></td>
          <td><input name="organisation" type="text" id="organisation" size="50"></td>
        </tr>
        <tr>
          <td align="right" valign="top"><strong>Comments</strong></td>
          <td><textarea name="comments" cols="45" rows="10" id="comments"></textarea></td>
        </tr>
     
        <tr>
          <td align="right" nowrap><strong>* Password (for further correspondence)</strong></td>
          <td><input name="thepassword" type="password" id="thepasssword"  ></td>
        </tr>
     
     <tr>
     <td colspan="2" align=center>
        <INPUT value="Submit" type="submit" onClick="return validateForm()">
     <INPUT onclick="formreset()" value="Reset" type="reset"></TD>
     </TR>
    </TBODY>
     </table>
      <p></p>

    </form>
    <p></p>
    <p></p>
    <p></p>
    <p>GTB Financial Solutions APPLICATION Form page</p>
    <p></p>

     <hr>
     
     </body>
    </html>

     

    Wednesday, April 20, 2011 2:46 AM

All replies

  • Can someone pleashelp me with this
    Helen Pearce
    Saturday, April 23, 2011 7:20 AM
  • Sorry for this late reply.

    Try this:

    add ending semi-colons to lines 42, 49, 56, 67, 79, 91, 106, and 113

    then ending bracket on line 40 does not match any beginning bracket so just comment out

    I think it runs after that. 


    • Edited by rpgivpgmr2 Tuesday, August 18, 2015 6:31 PM
    Tuesday, August 18, 2015 6:30 PM