Results 1 to 4 of 4

Thread: Form field validation

  1. #1
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Form field validation

    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>

  2. #2
    Join Date
    Nov 2008
    Posts
    58
    Thanks
    0
    Thanked 7 Times in 7 Posts

    Default

    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.

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •