Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Having a problem with some form validation

    Hello,

    I'm working on a script to do some relatively simple form validation. The program should check for a first name, last name, and an email address. The problem I'm having is that the program is completely skipping the form validation function, no matter what. Like, If I cllick on the Submit button, and the fields are blank, it submits the form regardless. I've been pouring over this simple thing for syntax errors for an hour and can't find anything wrong there. I included the function call in the right place, so I'm really not sure what's going on here. Here's the code, if somebody could give me a hint as to what needs fixing I'd really appreciate it.

    Code:
    <html>
    <head>
    <title>  My Form Validation  </title>
    
    <script type="text/javascript">
    
    function Validate_Form () 
    {
       valid=true;
    
    if (document.contact_Form.First_Name.value == "")
    {
       alert("You must enter your first name");
       
       valid=false;
    }
    
    if (document.contact_Form.Last_Name.value == "")
    {
       alert("You must enter your last name");
       
       valid=false;
    }
    
    if (document.contact_Form.Email.value == "")
    {
      alert("You must enter an Email address");
      
      valid=false;
    }
    return valid;
    }
      
    </script>
    </head>
    <body>
    <form name = "contact_Form" method="post" action="Bryand_Freeman_wk2secondpage.htm" onSubmit="return Validate_Form ();">
    <h1>
    <center> Join Our Mailing List Today! </center>
    </h1>
    <br>
    <br>
    <center> Join my mailing list! </center>
    <br>
    <br>
    <center>
    
     <table cellspacing = "2">
    <tr>
       <td> First Name </td>
       <td> <input type="text" name="First_Name:"> </td>
    </tr>
    
    <tr>
       <td> Last Name </td>
       <td> <input type="text" name="Last_Name:"> </td>
    </tr>
    
    <tr>
       <td> Residence Mail </td>
       <td> <input type="text" name="Home_Address:"> </td>
    </tr>
    
    <tr>
       <td> City </td>
       <td> <input type=text" name="Your_City:"> </td>
    </tr>
    
    <tr>
       <td> State </td>
       <td> <input type="text" name="Your_State:"> </td>
    </tr>
    
    <tr> 
       <td> Zip Code </td>
       <td> <input type="text" name="Your_Zip:"> </td>
    </tr>
    
    <tr> 
       <td> Email </td>
       <td> <input type="text" name="Email:"> </td>
    </tr>
    </table>
     <p><input type="submit" name="send" value="Click to Submit"></p>
    </form>
    
    </center>
    
    </body>
    </html>
    Thanks in advance for any suggestions or hints.

  • #2
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried putting the Validate_Form function call into the line of code for the Click to Submit button, and it still doesn't work. Where else could that function call go? Is that the problem or am I coding the script wrong?

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Remove the typo:
    Code:
       <td> <input type="text" name="First_Name:"> </td>
    .
    .
     <td> <input type="text" name="Last_Name:"> </td>
    .
    .
      <td> <input type="text" name="Home_Address:"> </td>
    .
    .
    Remove highlighted in all the values of your name attribute. This goes all the way down your markup.

    ...also, you missed this one:
    Code:
      <td> <input type="text" name="Your_City:"> </td>
    Sidenote, find time to fix those deprecated tag and attributes

    Hope that helps.
    Last edited by rangana; 09-26-2008 at 07:59 AM.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    coldfire204 (09-26-2008)

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, thanks for the help! I took the colons out and everything works like it's supposed to now.. but why can't I use the colons as long as they are part of a text string like that?

    Thanks for the update on the tags too.. I haven't really learned much CSS yet, and the only HTML books I have are pretty old heh.

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    It's because your JS code is looking for the input's name, and you have them erroneously.

    Let me quote this part:
    Code:
    document.contact_Form.First_Name.value
    You are looking for a form an element having a name of First_Name in the form having name of contact_Form. This means that your markup should be:
    Code:
    <form name="contact_Form">
    <input type="text" name="First_Name">
    </form>
    ...but what you have in your markup has colon on it:
    Code:
    <input type="text" name="First_Name:">
    Which means that you need to change the script:
    Code:
    document.contact_Form.First_Name:.value
    ...but that's erroneous.

    Hope that makes sense.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks, script works fine!

    Thank you all! I was able to edit this script and use it on my site, works great! I'll only have to change the way the e-mail address is checked. Thanks!


  •  

    Posting Permissions

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