View Full Version : Adding functions and variables

01-12-2012, 01:02 PM
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



<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");

fullName_err.innerHTML="Please enter your Full Name";
address_err.innerHTML="Please enter your Street Address";
location_err.innerHTML="Please enter your Surburb/Town";
postcode_err.innerHTML="Please enter your Postcode";
homePhone_err.innerHTML="Please enter your Phone Number";
email_err.innerHTML="Please enter a valid Email";

street_err.innerHTML="Please enter Street Address";
otherLocation_err.innerHTML="Please enter Suburb/Town";
otherPostcode_err.innerHTML="Please enter Postcode";

if(Name=="" || address=="" || location=="" || postcode=="" || homePhone=="" || email=="" || street=="" || otherLocation=="" || otherPostcode=="") {
alert("Please Check form and fill in form data correctly");
return false;
return true;


<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 -->

<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>
<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">
<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>
* Exp Date:
<select name="expMonth" size="0">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<select name="expYear" size="0">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<!-- 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>
* Qty:
<select name="quantity" size="0">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<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>
* 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 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 name="delYear" size="0">
<option value="2012">2012</option>
<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">

Philip M
01-12-2012, 01:21 PM
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:-

<select id = "myselect">
<option value = "0">Choose....</option>
<option value = "1">One</option>
<option value = "2">Two</option>

<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;

var address=form["address"].value;
You should avoid using the same name for a Javascript variable and an HTML element.

01-12-2012, 02:29 PM
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.