SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validation help! Urgent!

    I have the following code. Disregard the div classes for right now. The forum also won't let me include the lines that go in the declaration up top, so I've just put "............."

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".................">
    <html xmlns="..........." xml:lang="en" lang="en">
    <head>
    <style class="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;
    }
    
    function validate_form ( )
    {
        valid = true;
    
        if ( document.contact_form.books.selectedIndex == 0 )
        {
            alert ( "Please select your book." );
            valid = false;
        }
     
    if ( document.contact_form.Qyt.value == "" )
        {
            alert ( "Please fill in the 'Qty' box." );
            valid = false;
       }
        
    if ( document.contact_form.name.value == "" )
        {
            alert ( "Please fill in the 'Name' box." );
            valid = false;
        }
          
    if ( document.contact_form.address.value == "" )
        {
            alert ( "Please fill in the 'Address' box." );
            valid = false;
        }
        
    if ( document.contact_form.zipcode.value == "" )
        {
            alert ( "Please fill in the 'ZipCode' box." );
            valid = false;
        }
        
    if ( document.contact_form.state.value == "" )
        {
            alert ( "Please fill in the 'State' box." );
            valid = false;
        }
         
    if ( document.contact_form.phone.value == "" )
        {
            alert ( "Please fill in the 'Phone' box." );
            valid = false;
        }
       
    if ( document.contact_form.email.value == "" )
        {
            alert ( "Please fill in the 'Email' box." );
            valid = false;
        }
            return valid;
        }
    
    
    </style>
    </head>
    
    <body>
    <form name="order_form" method="post" onsubmit="return 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>Javascript Book</option>
    <option>Javascript Book</option>
    <option>Javascript Book</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" checked /> 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" multiple>
    <option>Internet Books</option>
    <option>Programming Languages</option>
    <option>Networking Books</option>
    <option>Networking Books</option>
    <option>Networking Books</option>
    <option>Networking 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>
    </form>
    </body>
    </html>
    When someone presses the submit button, I need to validate the following:
    that the name, address, state, zip code, phone number, and email fields are not left blank. I also have to ensure the email isn't less than 5 characters long, the email isn't missing a period, the email doesn't have less than three letters following the period, a book has been selected from the "Select the Book" list, and there is a quantity of at least one in the QTY field. I need all alerts to pop up in 1 box. When all fields are properly filled out or completed, I need to display a message that confirms the book selection and the number of books. I've started to work on it, but I'm having a lot of trouble. I've never done validation before and I'm very lost and confused.

  2. #2
    Smart programmer silver trophy M.Zeb Khan's Avatar
    Join Date
    Jan 2004
    Location
    Luton, Beds
    Posts
    1,791
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You wrote Javascript code in CSS

    You should always write Javascript code int he <script></script> tags.

    Here is a quick validation script done for you:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".................">
    <html xmlns="..........." xml:lang="en" lang="en">
    <head>
    <style class="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 MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_validateForm() { //v4.0
      var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
      for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
        if (val) { nm=val.name; if ((val=val.value)!="") {
          if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
            if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
          } else if (test!='R') { num = parseFloat(val);
            if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
            if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
              min=test.substring(8,p); max=test.substring(p+1);
              if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
        } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
      } if (errors) alert('The following error(s) occurred:\n'+errors);
      document.MM_returnValue = (errors == '');
    }
    //-->
    </script>
    </head>
    
    <body>
    <form method="post" name="order_form" onsubmit="MM_validateForm('Qty','','RisNum','name','','R','address','','R','zipcode','','R','state','','R','phone','','NisNum','email','','RisEmail');return document.MM_returnValue">
    
    <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>Javascript Book</option>
    <option>Javascript Book</option>
    <option>Javascript Book</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" checked /> 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" multiple>
    <option>Internet Books</option>
    <option>Programming Languages</option>
    <option>Networking Books</option>
    <option>Networking Books</option>
    <option>Networking Books</option>
    <option>Networking 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>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've done it differently. However, it tells me that "validate_form is not defined." How do I fix this? Also, when all fields are filled in correctly, how do I get a box to pop up that confirms the book selected and the quantity?
    Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".............">
    <html xmlns="............." 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.order_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>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The opening and closing braces in your code don't match.

    Code javascript:
    function validate_form() {
        var error_msg = "";
        var form = document.order_form;
     
        if (form.books.selectedIndex==0) // is opening brace missing?
            error_msg += "Please select your book.\n";
    }
        if (form.Qty.value=="") // is opening brace missing?
            error_msg += "Please fill in the 'Qty' box.\n";
    }
    ...
    }

    Use appropriate indenting for the braces and you'll have an easier time working through such troubles.

    With control statements, if you use no braces then only the one line is affected. To affect multiple lines you must enclose them in braces.

    Code javascript:
    if (someCondition === true)
        doSomething();
     
    if (someOtherCondition === true) {
        doSomething();
        doSomethingElse();
    }

    You should always use braces when dealing with control statements. Imagine if you will that you have only one statement with no braces, then later on want to add one or more statements to it. You will also have to remember to include the braces, and many times fail to do so. When it comes to debugging, the indenting will serve to further confuse you.

    Code javascript:
    if (someCondition === true)
        doSomething();
        doSomethingElse();
     
    // the above is the same as
     
    if (someCondition === true) {
        doSomething();
    }
    doSomethingElse();
     
    // the desired code is
    if (someCondition === true) {
        doSomething();
        doSomethingElse();
    }

    So always include braces, even when dealing with just one line. Their inclusion helps to prevent troubles that will occur at some later stage.

    Here's how to fix the trouble in your code

    Code javascript:
    function validate_form() {
        var error_msg = "";
        var form = document.order_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";
        }
    ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •