Maybe this is a little better
<head>
<title>Billing Form</title>
<script type="text/javascript" src="jsAssignTwo.js"></script>
<script type="text/javascript">
function validateForm()
{
var rePost = /^[A-Z][0-9][A-Z]\s[0-9][A-Z][0-9]$/;
var rePhone = /^\(?(\d{3})\)?[\.\-\/\s]?(\d{3})[\.\-\/\s]?(\d{4})$/;
var error = "";
var missing = false;
var cityLength = city.value.length;
var first = document.billingForm.first.value;
var city = document.billingForm.city.value;
var postal = document.billingForm.postal.value;
var phone = document.billingForm.phone.value;
var email = document.billingForm.email.value;
var sF = document.getElementById("first").focus();
if (first == "")
{
missing = true;
error += "\nPlease provide your first name";
}
if (city == "" || cityLength < 3)
{
missing = true;
error += "\nPlease provide your city must be greater then three characters";
}
// Postal code validation and format
if (!rePost.test(postal))
{
missing = true;
error += "\nPlease provide your postal code. Ex: N1E 1E9";
}
if (!rePhone.test(phone))
{
missing = true;
error += "\nPlease provide your phone number Ex: 5192125598, 519 212 5598, or (519) 212 5598";
}
if (email.search(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/) == -1)
{
missing = true;
error += "\nInvalid email Ex: usersemail@domain.com";
}
// Show all message in one alert box
if (missing)
{
// calling all messages
alert("You have enter the following data incorrectly: \n " + error);
}
else
{
// if form filled out correct inform customer
document.write("Thank you for submitting your information");
}
}
// Set focus on the first field
</script>
<!--CSS for formatting the form-->
<style type="text/css">
.container {
width: 200px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
</style>
</head>
<!--div for formatting purpose-->
<div class="container">
<body onLoad="setFocus()" bgcolor="grey">
<form action="http://cswin2k5/echo/default.asp" method="post" name="billingForm">
<h2 id = "welcome">Billing Information</h2>
Title: </div>
<input type="radio" name="Titles" id="titleOne" value="Title" /> Mr.
<input type="radio" name="Titles" id="titleTwo" value="Title" /> Mrs.
<input type="radio" name="Titles" id="titleThree" value="Title" /> Miss.
<input type="radio" name="Titles" id="titleFour" value="Title" /> Ms.
<div class="container">
<p>First Name*:
<input type="textbox" name="first" id="first" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>Last Name*:
<input type="textbox" name="last" id="last" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>Address:
<input type="textbox" name="address" id="address" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>City:
<input type="textbox" name="city" id="city" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>Province:
<input type="textbox" name="province" id="province" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>Postal Code*:
<input type="textbox" name="postal" id="postal" onBlur="this.value=trim(this.value)" onChange="this.value=this.value.toUpperCase()"></p>
<p>Country:
<input type="textbox" name="country" id="country" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>Phone:
<input type="textbox" name="phone" id="phone" onBlur="this.value=trim(this.value)"></p>
<p>Email:
<input type="textbox" name="email" id="email" onBlur="this.value=trim(this.value)" placeholder="email@domain.com"></p>
<p>Credit Card Holder*:
<input type="textbox" name="holder" id="holder" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
<p>Credit Card*:</div>
<input type="checkbox" name="visa" id="visa"> Visa
<input type="checkbox" name="master" id="master"> MasterCard
<input type="checkbox" name="american" id="american"> American Express</p>
<div class="container">
<p>Credit Card Number*:
<input type="textbox" name="credit" id="credit" onBlur="this.value=trim(this.value)"></p>
<p>Expiration Date*:
</div>
<select name="Exp month" id="expMonth">
<option value="blank" selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="Exp year" id="expYear">
<option value="blank" selected></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p><input type="button" value="Proccess Payment" onClick="validateForm();"/></p>
</form>
</body>
</html>
However I was asked to use .js library to try to validate these form. Something like this
function setFocus(firstFocus)
{
first.focus();
}
function validate(fN, cY, pL, pE, eM)
{
}
// Capital on every letter function
function capitalize(capital)
{
capital.value = capital.value.charAt(0).toUpperCase() + capital.value.slice(1);
}
// Trim all white spaces
function trim(trimSpace)
{
return trimSpace.trim();
}
As you can see anyone can take the capitalization and trim and use it on there form through my .js library. However I'm having trouble on were to begin with coding the validation in the js library and getting it into my HTML. If anyone can help on were to begin and I hope this is clear if not just ask me what I wasn't clear on. Thanks