Well, the first thing is you have three functions named the same thing (validateForm()) and taking the same arguments (a reference to the form), which makes things tough as JavaScript is VERY picky. What happens is the previous two validateForm() declarations are overwritten by the third, so only the phone field is ever validated.
So, the first thing we need to do is combine all of those checks into one validateForm() function:
Code:
function validateForm(form) { //This is the name of the function
if (form.shipFirstName.value == "") { //This checks to make sure the field is not empty
alert("The First Name is empty."); //Informs user of empty field
form.shipFirstName.focus(); //This focuses the cursor on the empty field
return false; //This prevents the form from being submitted
}
if (form.shipFamilyName.value == "") { //This checks to make sure the field is not empty
alert("The Family Name is empty."); //Informs user of empty field
form.shipFamilyName.focus(); //This focuses the cursor on the empty field
return false; //This prevents the form from being submitted
}
re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; // Email regex.
if (re.test(trim(form.billEmailAddress.value))) {
return true;
}
else{
alert(form.billEmailAddress.value + " isn't a valid email address.");
form.billEmailAddress.focus();
form.billEmailAddress.select();
return false;
}
re = /^(\s*\(?0\d{5}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$/; // Phone regex.
//validPhone = re.exec(form.phone.value);
if (re.test(trim(form.phone.value))) {
return true;
}
else {
alert(form.phone.value + " isn't a valid number.");
form.phone.focus();
return false;
}
}
Now, the validateForm() function will move down the form, validating each input, and breaking when one of them fails to pass the test(s).
However, when you check whether or not the first name or family name is empty, you're doing a simple comparison with an empty string. What if the person put a space in the form field? You probably don't want that, so we want to trim it.
JavaScript has no real string trimming function, so we'll make our own. The following trimming regex can be found all over the web for string trimming, so I don't consider it copyrighted or otherwise belonging to anyone.
Code:
// Removes left whitespace.
function ltrim(value) {
var re = /\s*((\S+\s*)*)/;
return value.replace(re, "$1");
}
// Removes right whitespace.
function rtrim(value) {
var re = /((\s*\S+)*)\s*/;
return value.replace(re, "$1");
}
// Removes both.
function trim(value) {
return ltrim(rtrim(value));
}
Now we have something relatively useful. Put it all together and we get:
Code:
<script language="javascript" type="text/javascript">
// Removes left whitespace.
function ltrim(value) {
var re = /\s*((\S+\s*)*)/;
return value.replace(re, "$1");
}
// Removes right whitespace.
function rtrim(value) {
var re = /((\s*\S+)*)\s*/;
return value.replace(re, "$1");
}
// Removes both.
function trim(value) {
return ltrim(rtrim(value));
}
function validateForm(form) { //This is the name of the function
if (trim(form.shipFirstName.value) == "") { //This checks to make sure the field is not empty
alert("The First Name is empty."); //Informs user of empty field
form.shipFirstName.focus(); //This focuses the cursor on the empty field
return false; //This prevents the form from being submitted
}
if (trim(form.shipFamilyName.value) == "") { //This checks to make sure the field is not empty
alert("The Family Name is empty."); //Informs user of empty field
form.shipFamilyName.focus(); //This focuses the cursor on the empty field
return false; //This prevents the form from being submitted
}
re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; // Email regex.
if (re.test(trim(form.billEmailAddress.value))) {
return true;
}
else{
alert(form.billEmailAddress.value + " isn't a valid email address.");
form.billEmailAddress.focus();
form.billEmailAddress.select();
return false;
}
re = /^(\s*\(?0\d{5}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$/; // Phone regex.
//validPhone = re.exec(form.phone.value);
if (re.test(trim(form.phone.value))) {
return true;
}
else {
alert(form.phone.value + " isn't a valid number.");
form.phone.focus();
return false;
}
}
</script>
There is one additional snag, however. The phone regex doesn't appear to be working correctly, and my regular expression skills are pretty newbish, so I'll leave that open to someone else for the time being.
Hope this helps.
