Form field validation

**Dragonwalker** · 07-14-2010, 01:23 PM

Hello,

I was wondering whether someone could let me know if there is an easy wany to add script, probably javascript to the following code to validate all fields at the same time and let the people know on the page which fields they need to correct. I have found scripts but they show the script but not where it would fit within the whole html code.

this code goes within a page program so that is why it does not have html body or head etc.

Thank you in advance.

Rachel

Code:

<p><font size="4">Join Our Mailing List!</font><br />
<br />
<font size="3">In doing so you will be able to receive notifications as new properties become available, sometimes even before they are listed on our website.</font></p>
<form action="tellus.php3">
    <table width="800">
    </table>
    <table bordercolor="#dddddd" border="3" bgcolor="#cccc99">
        <tbody>
            <tr>
                <td align="left" width="45%" colspan="2"><font size="4" face="arial rounded MT bold">&nbsp;INFORMATION:</font>&nbsp;</td>
            </tr>
            <br />
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>First Name</font></td>
                <td align="left" width="55%"><input type="text" name="firstname" size="35" /></td>
            </tr>
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>Last Name</font></td>
                <td align="left" width="55%"><input type="text" name="lastname" size="35" /></td>
            </tr>
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>Email Address</font></td>
                <td align="left" width="55%"><input type="text" name="emailaddress" size="45" /></td>
            </tr>
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>Phone Number</font></td>
                <td align="left" width="55%"><input type="text" name="phonenumber" size="35" /></td>
            </tr>
        </tbody>
    </table>
    <font size="2" face="arial rounded MT bold"><font color="#ff0000">*</font>is required</font><br />
    <br />
    <input type="hidden" name="required" value="firstname,lastname,emailaddress,phonenumber" />         <input type="reset" value="Reset" /><input type="submit" value="Submit" />
</form>
<p>&nbsp;We will <u>never</u> sell or disclose your information to any third party.</p>
<p>&nbsp;</p>
<p>&nbsp;<br />
<br />
<br />
<br />
&nbsp;</p>

**prasanthmj** · 07-14-2010, 06:17 PM

The script in the page below will be useful:
JavaScript Form Validation

Note that you have to do validations on the server side as well, since Javascript can be turned off.

**boogyman** · 07-14-2010, 06:33 PM

1) Validate your code http://validator.w3.org
2) Don't use JS alone for validation... eg, Use JS to interact with server (AJAX) on "user-defined input" change, not submission
3) JS scripts are for the <head> tag, and should be used unobtrusively... google it :P

**Dragonwalker** · 07-14-2010, 11:15 PM

thank you for the links. they have been a great help but I did what I believe they were telling me to do, and although the form still works it does not validate the inputs. The code now looks like the following:

Code:

<p><font size="4">Join Our Mailing List!</font><br />
<br />
<font size="3">In doing so you will be able to receive notifications as new properties become available, sometimes even before they are listed on our website.</font></p>
<form action="tellus.php3">
    <table width="800">
    </table>
    <table bordercolor="#dddddd" border="3" bgcolor="#cccc99">
        <tbody>
            <tr>
                <td align="left" width="45%" colspan="2"><font size="4" face="arial rounded MT bold">&nbsp;INFORMATION:</font>&nbsp;</td>
            </tr>
            <br />
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>First Name</font></td>
                <td align="left" width="55%"><input type="text" size="35" name="firstname" /></td>
            </tr>
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>Last Name</font></td>
                <td align="left" width="55%"><input type="text" size="35" name="lastname" /></td>
            </tr>
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>Email Address</font></td>
                <td align="left" width="55%"><input type="text" size="45" name="emailaddress" /></td>
            </tr>
            <tr>
                <td align="right" width="45%"><font size="3" face="arial rounded MT bold"><font color="#ff0000">*</font>Phone Number</font></td>
                <td align="left" width="55%"><input type="text" size="35" name="phonenumber" /></td>
            </tr>
        </tbody>
    </table>
    <font size="2" face="arial rounded MT bold"><font color="#ff0000">*</font>is required</font><br />
    <br />
    <input type="hidden" value="firstname,lastname,emailaddress,phonenumber" name="required" />         <input type="reset" value="Reset" /><input type="submit" value="Submit" />
</form>
<script language="JavaScript" type="text/javascript">
 var frmvalidator = new Validator("subscription");
 frmvalidator.addValidation("firstname","req","Please enter your First Name");
 frmvalidator.addValidation("firstname","maxlen=20",
"Max length for firstname is 20");
 frmvalidator.addValidation("firstname","alpha");
 
 frmvalidator.addValidation("lastname","req");
 frmvalidator.addValidation("lastname","maxlen=20");
 
 frmvalidator.addValidation("emailaddress","maxlen=50");
 frmvalidator.addValidation("emailaddress","req");
 frmvalidator.addValidation("emailaddress","email");
 
 frmvalidator.addValidation("phonenumber","maxlen=50");
 frmvalidator.addValidation("phonenumber","numeric");
 
 </script>
<p>&nbsp;We will <u>never</u> sell or disclose your information to any third party.</p>
<p>&nbsp;</p>
<p>&nbsp;<br />
<br />
<br />
<br />
&nbsp;</p>

Note that as this is an editable frame I added the javascript that is supposed to go between head and /head in the main.html. As there are other lines in the head is there a particular place that it should go? Also, I understand that I should be validating it on the server side but I do not know how to do this and I would be quite happy with most of them being validated due to the fact that they are going to be screened anyway by us.

Thank you so much.

PS I have been googling but just can't figure it out. Sorry.

Thread: Form field validation

Thread Tools

Search Thread

Form field validation

Bookmarks

Bookmarks

Posting Permissions