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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Validation help needed!

    Okay, I have a form and I need to validate several things. I've done all that, however when I try to use it I'm told "validate_form is not defined." How do I define it and what am I doing wrong? Also, when all fields are filled in correctly, I need a box to pop-up and confirm the book that was selected and the quantity. Could someone help me with this as well?

    Here's my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Book Order Form</title>
    <style type="text/css">
    
    * {
    margin:0px;
    padding:0px;
    font-family:'Times New Roman', sans-serif;
    font-size:16px;
    color:#333333;
    font-weight: bold;
    }
    
    .container {
    width:500px;
    background-color:#fff;
    margin:10px auto;
    text-align:center;
    border:2px solid #CDC9A5;
    overflow:hidden;
     }
    
    .basic {
    display:block;
    text-align:left;
    background-color:#999999;
    padding:2px 0px;
    }
    
    .formHoldersL:first-child {
    border-top:0px;
    }
    
    .formHoldersL {
    display:block;
    width:188px;
    float:left;
    text-align:left;
    padding:4px 17px;
    border-top:2px solid #CDC9A5;
    height:inherit;
    }
    .formHoldersR:first-child {
    border:0px;
    }
    
    .formHoldersR {
    display:block;
    width:275px;
    float:right;
    text-align:left;
    padding:0px;
    border-top:2px solid #CDC9A5;
    border-left:2px solid #CDC9A5;
    height:inherit;
    }
    
    .clear {
    clear:both;
    }
    
    .button {
    border-top:2px solid #CDC9A5;
    }
    
    </style>
    <script type="text/JavaScript">
    
    function validate_form() {
        var error_msg = "";
        var form = document.form;
    
        if (form.books.selectedIndex==0)
            error_msg += "Please select your book.\n";
    }
        if (form.Qty.value=="")
            error_msg += "Please fill in the 'Qty' box.\n";
    }
        if (form.name.value=="")
            error_msg += "Please fill in the 'Name' box.\n";
    }    
        if (form.address.value=="")
            error_msg += "Please fill in the 'Address' box.\n";
    }  
        if (form.zipcode.value=="")
            error_msg += "Please fill in the 'Zip Code' box.\n";
    }   
        if (form.state.value=="")
            error_msg += "Please fill in the 'State' box.\n";
    }
        if (form.phone.value=="")
            error_msg += "Please fill in the 'Phone' box.\n";
    }
        if (form.email.value=="")
            error_msg += "Please fill in the 'Email' box.\n";
    }
    
        if (form.email.value.matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i) == false )
        error_msg = "Please put in a properly-formatted email address.\n";
    }
        if (form.Qty.value.matches(/^[1-9]\d*$/) == false )
        error_msg = "Please put in a quantity great than 0. \n";
    }
        if( error_msg != "" )
            alert(error_msg);
    
        return (error_msg == "");
    }
            
    </script>
    </head>
    
    <body>
    <form method="post" action="post" onsubmit="validate_form()">
    
    <div class="container">
    
    <div class="basic">Online Bookstore</div>
    <div class="formHoldersL">Select the book</div>
    <div class="formHoldersR"><select name="books">
    <option>Javascript Book</option>
    <option>Java Language Book</option>
    <option>VBScript Book</option>
    <option>Advanced Programming in Java</option>
    <option>Data Structures in C++</option>
    <option>Perl and CGI</option>
    </select></div>
    <div class="clear"></div>
    <div class="formHoldersL">Qty</div>
    <div class="formHoldersR"><input name="Qty" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="formHoldersL">Do you want a free subscription to the newsletter?</div>
    <div class="formHoldersR"><input name="newsletter" type="radio" value="yes"  /> Yes <input name="newsletter" type="radio" 
    
    value="no"  /> No
    
    <p>&nbsp;</p></div>
    <div class="clear"></div>
    <div class="formHoldersL">Free Information Book List:</div>
    <div class="formHoldersR"><select name="information" size="5">
    <option>Internet Books</option>
    <option>Programming Languages</option>
    <option>Networking Books</option>
    <option>Internet Security Books</option>
    <option>Scripting Books</option>
    <option>Application Design Books</option>
    </select></div>
    <div class="clear"></div>
    
    <div class="basic">Delivery Information</div>
    <div class="clear"></div>
    <div class="formHoldersL">Name</div>
    <div class="formHoldersR"><input name="name" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="formHoldersL">Address</div>
    <div class="formHoldersR"><input name="address" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="formHoldersL">ZipCode</div>
    <div class="formHoldersR"><input name="zipcode" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="formHoldersL">State</div>
    <div class="formHoldersR"><input name="state" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="formHoldersL">Phone</div>
    <div class="formHoldersR"><input name="phone" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="formHoldersL">Email</div>
    <div class="formHoldersR"><input name="email" type="text" size="20" /></div>
    <div class="clear"></div>
    <div class="button"><input type="submit" value="Submit"/><input type="reset" /></div>
    <div class="clear"></div>
    </div>
    </form>
    </body>
    </html>

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Your validate form function hasn't been set up right. You close it after the first if statement. You actually closed your function after the first if statement by having that closing curly brace '}' though I'm not sure why your function is coming up undefined
    Code:
    function validate_form() {
        var error_msg = "";
        var form = document.form;
    
        if (form.books.selectedIndex==0){
            error_msg += "Please select your book.\n";
        }
        if (form.Qty.value==""){
            error_msg += "Please fill in the 'Qty' box.\n";
        }
        if (form.name.value==""){
            error_msg += "Please fill in the 'Name' box.\n";
        }    
        if (form.address.value==""){
            error_msg += "Please fill in the 'Address' box.\n";
        }  
        if (form.zipcode.value==""){
            error_msg += "Please fill in the 'Zip Code' box.\n";
        }   
        if (form.state.value==""){
            error_msg += "Please fill in the 'State' box.\n";
        }
        if (form.phone.value==""){
            error_msg += "Please fill in the 'Phone' box.\n";
        }
        if (form.email.value==""){
            error_msg += "Please fill in the 'Email' box.\n";
        }
    
        if (form.email.value.matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i) == false ){
        error_msg = "Please put in a properly-formatted email address.\n";
        }
        if (form.Qty.value.matches(/^[1-9]\d*$/) == false ){
        error_msg = "Please put in a quantity great than 0. \n";
        }
        if( error_msg != "" ){
            alert(error_msg);
        }
    }

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So what exactly should I change on the form function for it to be set up right. I don't think I understand what you're saying. Am I supposed to close it after the first if statement? Didn't I do that?

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Do I need to add { after each if statement? When I do that, I'm then told that frm isn't defined instead of validate_form isn't defined, so it isn't any better.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Replace throughout:-

    if (form.books.selectedIndex== 0) //missing brace {
    error_msg += "Please select your book.\n";
    }

    with

    if (form.books.selectedIndex== 0) {
    error_msg += "Please select your book.\n";
    }


    This comes from the poor coding practice of leaving out braces:-

    if( error_msg != "" )
    alert(error_msg);

    is strictly valid but can quickly lead to problems if braces elsewhere are assumed.

    Change to

    if (error_msg != "" ) {
    alert(error_msg);
    }


  •  

    Posting Permissions

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