SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member eddymac's Avatar
    Join Date
    Jan 2004
    Location
    queensland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validating forms containing tables

    After many hours of frustration, I have discovered that any form validation I use comes back with an error 'First Name is undefined'. - The form fields are within tables.
    When I use the same validator in a test form *without* tables, it works.

    Is there a simple solution? or must I recreate my form without tables. A bit difficult to lay out the form - or is it?

    Regards,

    Ed

    <html>
    <head>
    <title>No title</title>
    <SCRIPT LANGUAGE="JavaScript">
    function validateForm() {
    with (document.eeorder) {
    var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
    if (order_firstname.value == "") alertMsg += "\norder_firstname";
    if (order_lastname.value == "") alertMsg += "\norder_lastname";
    if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
    alert(alertMsg);
    return false;
    } else {
    return true;
    } } }
    // End -->
    </script>
    <meta name="generator" content="Namo WebEditor v5.0">
    </head>

    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <form name="eeorder">
    <table border="1">
    <tr>
    <td width="595">
    <p><input type="text" name="order_firstname"> First Name</p>
    </td>
    </tr>
    <tr>
    <td width="595"> <p><input type="text" name="order_lastname">
    Last Name</p>
    </td>
    </tr>
    <tr>
    <td width="595"> <p><input type="submit" name="formbutton1" onsubmit="return validateForm()"></p>
    </td>
    </tr>
    </table>
    </form>
    <p>&nbsp;</p>
    </body>

    </html>

  2. #2
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm leaving and don't have time to look thoroughly right now, but at first glance the <form> tag may need a method, action, and name.

    When calling the function try using an onClick="validateForm()" instead of the onsubmit= stuff you have.

    For the if statements, use the full location of the fields (ie: document.eeorder.order_firstname.value).
    ~Dorian

  3. #3
    SitePoint Member eddymac's Avatar
    Join Date
    Jan 2004
    Location
    queensland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I will try your suggestions.

    Ed

  4. #4
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    HTML Code:
    <html>
    <head>
    <title>No title</title>
    <SCRIPT LANGUAGE="JavaScript">
    function validateForm() 
    {
    	with (document.eeorder) 
    	{
    		var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
    		if (order_firstname.value == "") alertMsg += "\nFirst Name";
    		if (order_lastname.value == "") alertMsg += "\nLast Name";
    		if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") 
    		{
    			alert(alertMsg);
    			return false;
    		}
    		else
    		{
    			return true;
    		}
    	}
    }
    // End -->
    </script>
    <meta name="generator" content="Namo WebEditor v5.0">
    </head>
    
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <form name="eeorder" method="post" action="">
    <table border="1">
    <tr>
    <td width="595">
    <p><input type="text" name="order_firstname"> First Name</p>
    </td>
    </tr>
    <tr>
    <td width="595"> <p><input type="text" name="order_lastname"> 
    Last Name</p>
    </td>
    </tr>
    <tr>
    <td width="595"> <p><input type="submit" name="formbutton1" onClick="validateForm()"></p>
    </td>
    </tr>
    </table>
    </form>
    <p>&nbsp;</p>
    </body>
    
    </html>
    ~Dorian

  5. #5
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onSubmit always worked rather well for me, but I didn't put it on the submit button, i put it in the form tag itself.
    HTML Code:
    <form action='AddUserProcess.jsp' method='post' onSubmit='return validForm(this)'>
    Then In validForm, i'd have the form object and just refer to various values of fields and check them on what i needed.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  6. #6
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,497
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by theGWS
    the <form> tag may need a method, action, and name.
    The <form> tag doesn't necessarily need the method, action & name attributes, when validating the form fields through JavaScript or VBScript. While the method & action attributes are for needed to specify where the form will be submitted & using what method(post/get), they can be specified through JavaScript too. And the name attribute just eases the reference to the form fields & eliminates the need of refering the form fields through the forms() array.



    Quote Originally Posted by theGWS
    When calling the function try using an onClick="validateForm()" instead of the onsubmit= stuff you have.
    onSubmit also works as well as onClick. When validating forms before submitting them, its better to use onSubmit rather than onClick on a Submit button, if possible.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!


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
  •