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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding functions and variables

    Hi everyone,

    I am working on an assignment and require a little bit of assistance.

    I have a form (an order form) where I am required to validate the required entries - I have managed to do this with the textbox field no problems. Where I am coming unstuck is with the following items.

    homePhone - numbers only and max 10 numbers for validation
    postCode - same as above
    email validation of @ and .

    How do I validate comboboxs so that if nothing is selected an alert shows?

    If the "other address" radiobutton is checked how do I have the text boxes only validate on check?

    How do I validate the textarea when "do you want a card message" is ticked?

    I have been working on this for the past week and a bit and have done a fair amount of research and tried to implement various pieces of code I have found with no luck.

    I have removed some of the select objects to cut down on the amount of code.

    I am not expecting anyone to write my assignment for me, just wanting assistance to help me learn and become more proficient in JS

    Regards

    BP

    Code:
    <html>
    <head>
    <title>Online Order Form</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="author" content="Jeremy Porteous">
    <script type="text/javascript">
    
    <!--
    function validate(){
    var form=document.getElementById("orderForm");
    var Name=form["fullName"].value;
    var fullName_err=document.getElementById("fullName_err");
    var address=form["address"].value;
    var address_err=document.getElementById("address_err");
    var location=form["location"].value;
    var location_err=document.getElementById("location_err");
    var postcode=form["postcode"].value;
    var postcode_err=document.getElementById("postcode_err");
    var homePhone=form["homePhone"].value;
    var homephone_err=document.getElementById("homePhone_err");
    var email=form["email"].value;
    var email_err=document.getElementById("email_err");
    var checkbox=form["card"].value;
    var street=form["street"].value;
    var street_err=document.getElementById("street_err");
    var otherLocation=form["otherLocation"].value;
    var otherLocation_err=document.getElementById("otherLocation_err");
    var otherPostcode=form["otherPostcode"].value;
    var otherPostcode_err=document.getElementById("otherPostcode_err");
    
    
    if(Name==""){
    fullName_err.innerHTML="Please enter your Full Name";
    }else{
    fullName_err.innerHTML="";
    }
    if(address==""){
    address_err.innerHTML="Please enter your Street Address";
    }else{
    address_err.innerHTML="";
    }
    if(location==""){
    location_err.innerHTML="Please enter your Surburb/Town";
    }else{
    location_err.innerHTML="";
    }
    if(postcode==""){
    postcode_err.innerHTML="Please enter your Postcode";
    }else{
    postcode_err.innerHTML="";
    }
    if(homePhone==""){
    homePhone_err.innerHTML="Please enter your Phone Number";
    }else{
    homePhone_err.innerHTML="";
    }
    if(email==""){
    email_err.innerHTML="Please enter a valid Email";
    }else{
    email_err.innerHTML="";
    }
    
    if(street==""){
    street_err.innerHTML="Please enter Street Address";
    }else{
    street_err.innerHTML="";
    }
    if(otherLocation==""){
    otherLocation_err.innerHTML="Please enter Suburb/Town";
    }else{
    otherLocation_err.innterHTML="";
    }
    if(otherPostcode==""){
    otherPostcode_err.innerHTML="Please enter Postcode";
    }else{
    otherPostcode_err.innerHTML="";
    } 
     
    if(Name=="" || address=="" || location=="" || postcode=="" || homePhone=="" || email=="" || street=="" || otherLocation=="" || otherPostcode=="") {
    alert("Please Check form and fill in form data correctly");
    return false;
    }else{
    return true;
    }
    }
    -->
    
    </script>
    
    <h2>Joes Online Order Form</h2>
    <h5>* denotes a required field</h5>
    <h3><u>Your Details</u></h3>
    
    <form id="orderForm" name="orderForm" method="post" action="" onsubmit="javascript:return validate()">
    <!-- The form user is required to fill in some personal information * is a required field -->
    <!-- Input fields will be validated  -->
     
    <h4>*Name: 
    <label><input type="text" id="fullName" size="35"></label>
    <label id="fullName_err" style="color:#FF0000; font-style:italic;"></label></h4>
    <h4>* Address: 
    <label><input type="text" id="address" size="30"></label>
    <label id="address_err" style="color:#FF0000; font-style:italic;"></label>
    	* Suburb/Town:
    <label><input type="text" id="location" size="30"></label>
    <label id="location_err" style="color:#FF0000; font-style:italic;"></label></h4>
     <!-- The input field for "state" is a dropdown combo box -->
    <h4>* State:
    <select name="homeState" size="0">
    <option value="State">Select your State</option>
    <option value="ACT">ACT</option> 
    <option value="NSW">NSW</option> 
    </select>
    <label id="homeState_err" style="color:#FF0000; font-style:italic;"></label>
    * Postcode:
    <label><input type="text" id="postcode" maxlength="4" size="4"></label>
    <label id="postcode_err" style="color:#FF0000; font-style:italic;"></label></h4>
    <h4>* Home Phone:
    <label><input type="text" id="homePhone" maxlength="10" size="10"></label>
    <label id="homePhone_err" style="color:#FF0000; font-style:italic;"></label></h4>
    <h5>Work Phone:
    <input type="text" id="workPhone" maxlength="10" size="10">
    Fax:
    <input type="text" id="Fax" maxlength="10" size="10"></h5>
    <h4>* Email:
    <label><input type="text" id="email" size="30"></label>
    <label id="email_err" style="color:#FF0000; font-style:italic;"></label></h4>
    <!-- The input fields for "type" and "expDate" are dropdown combo boxes -->
    <h4><em>Credit Card Details</em></h4>
    <h4>* Type:
    <select name="creditCard" size="0">
    <option value="creditCard">Select your Credit Card</option> 
    <option value="visa">Visa</option>
    <option value="mastercard">Master Card</option>
    </select>
    * Exp Date:
    <select name="expMonth" size="0">
    <option value="Jan">Jan</option> 
    <option value="Feb">Feb</option> 
    <option value="Mar">Mar</option>
    </select>
    <select name="expYear" size="0">
    <option value="2012">2012</option> 
    <option value="2013">2013</option> 
    <option value="2014">2014</option>
    </select></h4>
      <!-- Using the combo boxes the user can select type of basket and qty -->
    <h4><em>Purchase Details</em></h4>
    <h4>* Basket Type:
    <select name="basketType" size="0">
    <option value="Select a Basket">Select a Basket</option> 
    <option value="1A">1A</option> 
    <option value="1B">1B</option>
     </select>
    &nbsp;
    * Qty:
    <select name="quantity" size="0">
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>
    </select></h4>
    <h4><b>* Deliver To:</b></h4>
    <!-- Radio buttons are mutually exclusive -->
    <h4><input type="radio" id="homeDel" name="delAddress" value="homeAddress" checked> Home Address</h4>
    <h4><input type="radio" id="otherDel" name="delAddress" value="otherAddress"> Other Address</h4>
    <!-- the following is for the "Other Address option" -->
    <h3><u>Other Address Details</u></h3>
    <h4>* Street:
    <label><input type="text" id="street" size="30"></label>
    <label id="street_err" style="color:#FF0000; font-style:italic;"></label>
    <!-- The input field for "state" is a dropdown combo box -->
    * Suburb/Town:
    <label><input type="text" id="otherLocation" size="30" ></label>
    <label id="otherLocation_err" style="color:#FF0000; font-style:italic;"></label></h4>
    <h4>* State:
    <select name="state" size="0">
    <option value="State">Select the State</option> 
    <option value="ACT">ACT</option>
    <option value="NSW">NSW</option> 	
    </select>
    * Postcode:
    <input type="text" id="otherPostcode" maxlength="4" size="4">
    <label id="otherPostcode_err" style="color:#FF0000; font-style:italic;"></label></h4>
    <h4><em><b>* Date Delivery Required</b></em>
    <select name="delDay" size="0">
    <option value="01">01</option> 
    <option value="02">02</option> 
    <option value="03">03</option> 
    <option value="04">04</option> 
    </select>
    <select name="delMonth" size="0">
    <option value="Jan">Jan</option>
    <option value="Feb">Feb</option> <option value="Mar">Mar</option> <option value="Apr">Apr</option>
    </select>
    <select name="delYear" size="0">
     <option value="2012">2012</option>
    </select></h4>
    <h5>Would you like to include a card? <input type="checkbox" id="card">
    <label id="card_err" style="color:#FF0000; font-style:italic;"></label></h5>
    <!-- Text box message will only be submitted if checkbox is ticked -->
    <p>Leave a personal message for the card<br>
    <textarea name="text" id="cardMessage" rows="5" cols="28"> Enter your message here</textarea></p>
    <p>***Click on <b>Submit</b> when complete or <b>Clear Form</b> to reset form***</p>
    <input type="submit" id="submit" value="Submit"> 
    <input type="reset" value="Clear Form" onClick="reset">
    </form>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    This topic has been covered many times before in this forum. Try using the search feature.

    Form validation of the pattern if(Name==""){ is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses - just checking for dot and @ is not adequate. You need to have a look at regular expressions.

    How do I validate comboboxs so that if nothing is selected an alert shows?
    Make one option selected at the outset.
    But by default the first option is selected:-

    Code:
    <select id = "myselect">
    <option value = "0">Choose....</option>
    <option value = "1">One</option>
    <option value = "2">Two</option>
    </select>
    
    <input type = "button" value = "Get value of select list" onclick = "getValue()">
    
    <script type="text/javascript">
    
    function getValue() {
    var val = document.getElementById("myselect").value;
    alert (val);  // for testing
    if (val == 0) {
    alert ("You must make a choice!");
    return false;
    }
    }
    </script>
    var address=form["address"].value;
    You should avoid using the same name for a Javascript variable and an HTML element.
    Last edited by Philip M; 01-12-2012 at 12:32 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Phil,

    Mate, do you mind if I pm you about this? Would you mind walking me through it so to speak?

    To give you a bit of background history I am completely new to programming and web development and have come to it due to a workplace injury not allowing me to do manual work any more; therefore I am bumbling my way through my course at the moment.

    Just on the search for similar topics, that is what I have done for the past three days, both on here and the wider net. As I said I am trying to get my head around new (for me) concepts.

    Cheers

    BP


  •  

    Posting Permissions

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