Form errors

[Jamie.ds]

I seem to have a problem, the script is meant to check each field one after another, but when it gets to the business number, it seems to skip to the email field if I just enter "d" into the field, where it should give an error.

Form:

<!--The onSubmit in the form tag is activated when the Submit button-->
<form name="contact_form" id="subForm" method="post" action="#" onSubmit="return validateForm();">
<p>
<label for="firstName" class="label">First Name:</label>
<input name="firstName" type="text" id="firstName" /><br />
<label for="lastName" class="label">Last Name:</label>
<input name="lastName" type="text" id="lastName" />
</p>
<p>
<label for="house" class="label">House Name or number:</label>
<input name="house" type="text" class="dual_hack" id="house" /><br />
<label for="street" class="label">Street Name:</label>
<input name="street" type="text" id="street" /><br />
<label for="town" class="label">Town:</label>
<input name="town" type="text" id="town" /><br />
<label for="postCode" class="label">Post Code:</label>
<input name="postCode" type="text" id="postCode" />
</p>
<p>
<label for="businessNumber" class="label">Business number:</label>
<input name="businessNumber" type="text" id="businessNumber" /><br />
<label for="mobileNumber" class="label">Mobile number:</label>
<input name="mobileNumber" type="text" id="mobileNumber" /><br />
<label for="homeNumber" class="label">Home number:</label>
<input name="homeNumber" type="text" id="homeNumber" /><br />
<label for="email" class="label">E-Mail:</label>
<input name="email" type="text" id="email" />
</p>
<p>
<label for="company_type" class="five_line">Type of company?</label>
<label><input name="company_type" type="radio" value="limitedPlc" /> Limited PLC</label><br />
<label><input name="company_type" type="radio" value="soleTrader" /> Sole Trader</label><br />
<label><input name="company_type" type="radio" value="charity" /> Charity</label><br />
<label><input name="company_type" type="radio" value="educational" /> Educational</label>
</p>
<p>
<label for="education_type" class="label">What type of Educational Establishment are you?</label>
<select name="education_menu" class="quad_hack">
<option value="na" selected="selected">N/A</option>
<option value="secondary">Secondary School</option>
<option value="academy">Academy</option>
<option value="sixth_form">Sixth Form</option>
<option value="fe">FE</option>
<option value="he">HE</option>
</select>
</p>
<p>
<label for="annual_amount" class="label">Annual Turnover:</label>
<select name="annual_menu">
<option value="less_50k">&lt;£50,000</option>
<option value="50k_100k">£50,000-£99,999</option>
<option value="100k_500k">£100,000 -£500,000</option>
<option value="500k_more">&gt;£500,000</option>
<option value="confidential">Confidential information</option>
</select>
</p>
<p>
<label for="core_business" class="label">What is your Core Business:</label>
<select name="core_type" multiple>
<option value="theatrical">Theatrical Productions</option>
<option value="film">Film Productions</option>
<option value="travelling">Travelling Theatre</option>
<option value="dance_music">Dance and Musical Production</option>
</select>
</p>
<p>
<label for="enquiry" class="label">Enquiry:</label>
<textarea name="enquiry" type="text" cols="50" rows="6" id="message" />Please Enter your enquiry here.</textarea>
</p>
<input name="submit" id="submit" type="submit" />
<input name="reset" type="reset" value="Reset">
</form>


JS:

//Checks the form for valid input
function validateForm()
{
//Form elements
//Name variables
var firstName=document.forms["contact_form"]["firstName"].value;
var lastName=document.forms["contact_form"]["lastName"].value;
//Address variables
var house=document.forms["contact_form"]["house"].value;
var street=document.forms["contact_form"]["street"].value;
var town=document.forms["contact_form"]["town"].value;
var postCode=document.forms["contact_form"]["postCode"].value;
//Number variables
var businessNumber=document.forms["contact_form"]["businessNumber"].value;
var mobileNumber=document.forms["contact_form"]["mobileNumber"].value;
var homeNumber=document.forms["contact_form"]["homeNumber"].value;
var blength=businessNumber.length;
var mlength=mobileNumber.length;
var hlength=homeNumber.length;
var numeric = /^[0-9]+$/;
//Email variables
var email=document.forms["contact_form"]["email"].value;
var atposition=email.indexOf("@");
var dotposition=email.lastIndexOf(".");
//Radio variables


//Start of validation
//First name
if (firstName==null || firstName=="")
{
alert("First name must be filled out");
return false;
}

//Last name
if (lastName==null || lastName=="")
{
alert("Last name must be filled out");
return false;
}

//House name
if (house==null || house=="")
{
alert("House name must be filled out");
return false;
}

//Street name
if (street==null || street=="")
{
alert("Street name must be filled out");
return false;
}

//Town
if (town==null || town=="")
{
alert("Town must be filled out");
return false;
}

//Post Code
if (postCode==null || postCode=="")
{
alert("Post code must be filled out");
return false;
}

//Phone number
if (homeNumber==null || homeNumber=="") //Check if field is empty
{
if (mobileNumber==null || mobileNumber=="")
{
if (businessNumber==null || businessNumber=="")
{
alert("You must enter a phone number");
return false;
}
else if (blength == "11"){ //Check if number has 11 digits
if (businessNumber.match(numeric)) { //Check if the field only contains numbers
return true;
}
else {
alert ("Only numbers are valid in the Business number field");
return false;
}
}
else if (mlength == "11"){
if (mobileNumber.match(numeric)) {
return true;
}
else {
alert ("Only numbers are valid in the Mobile field field");
return false;
}
}
}
else if (hlength == "11"){
if (homeNumber.match(numeric)) {
return true;
}
}
else {
alert("There must be 11 digits in the Home number field");
return false;
}
}

//Email
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length)
{
alert("Not a valid email address");
return false;
}

}

[traq]

are you entering a "homeNumber"? if so, you're also skipping validation on the mobile and business numbers.

[Jamie.ds]

Nono just putting "d" into the business field to make sure that works but it desn't, for the number field its meant to check for a business number if not it must have a mobile, if not it must have a home number.

[traq]

look here:
else if (blength == "11"){ //Check if number has 11 digits
if (businessNumber.match(numeric)) { //Check if the field only contains numbers
return true;
}
else {
alert ("Only numbers are valid in the Business number field");
return false;
}
}
you're skipping validation unless there are exactly 11 characters in the field.
(try it with "ddddddddddd")

what you're trying to do is
if( businessNumber.match(numeric) && blength == 11 ){ return true; }however, it's not a good approach.

It will only return true if I input my phone number like so:

12345678900

but I'm not very likely to do that. (and not just because I'm obstinate.) consider:

1-234-567-8900
+1-234-567-8900
1-234-567-89-00
1.234.567.8900
234-567-8900
567-8900

...and so forth. all valid numbers in commonly used formats (not what you expect, maybe not with all the info you want, but all valid), all rejected.

It would be more effective to strip all non-numeric characters, and then check that there were at least 10 (11 if you need the country code) digits provided.

Of course, my favorite advice is to "...assume that the user knows their own phone number."

[Jamie.ds]

look here:
else if (blength == "11"){ //Check if number has 11 digits
if (businessNumber.match(numeric)) { //Check if the field only contains numbers
return true;
}
else {
alert ("Only numbers are valid in the Business number field");
return false;
}
}
you're skipping validation unless there are exactly 11 characters in the field.
(try it with "ddddddddddd")

Hmm shouldn't the return false; stop the validation procedure?

[traq]

Hmm shouldn't the return false; stop the validation procedure?

do you mean
else if (blength == "11"){ //Check if number has 11 digits
if (businessNumber.match(numeric)) { //Check if the field only contains numbers
return true;
}
else {
alert ("Only numbers are valid in the Business number field");
return false; // <-- THIS ONE?
}
} // no, because if blength != 11, we skip straight to here.
// the inner if/else is never executed, so the value is never actually checked at all.

[Jamie.ds]

do you mean
else if (blength == "11"){ //Check if number has 11 digits
if (businessNumber.match(numeric)) { //Check if the field only contains numbers
return true;
}
else {
alert ("Only numbers are valid in the Business number field");
return false; // <-- THIS ONE?
}
} // no, because if blength != 11, we skip straight to here.
// the inner if/else is never executed, so never returns (true _or_ false).

Ohhhh I will check over it in the morning then, thank you~

[Jamie.ds]

Hmm doesn't seem to be running now >.<

//Phone number
if (homeNumber==null || homeNumber=="") //Check if field is empty
{
if (mobileNumber==null || mobileNumber=="")
{
if (businessNumber==null || businessNumber=="")
{
alert("You must enter a phone number");
return false;
}
else if (blength == "11"){ //Check if number has 11 digits
if (businessNumber.match(numeric)) { //Check if the field only contains numbers
return true;
}
else {
alert ("Only numbers are valid in the Business number field");
return false;
}
}
else {
alert("There must be 11 digits in the Business number field");
return false;
}
else if (mlength == "11"){
if (mobileNumber.match(numeric)) {
return true;
}
else {
alert ("Only numbers are valid in the Mobile number field");
return false;
}
}
else {
alert("There must be 11 digits in the Mobile number field");
return false;
}
}
else if (hlength == "11"){
if (homeNumber.match(numeric)) {
return true;
}
}
else {
alert("Only numbers are valid in the Home number field");
return false;
}
else {
alert("There must be 11 digits in the Home number field");
return false;
}
}

[traq]

mismatched brackets. I indent like so, which makes it much easier for me to see where blocks start and stop... maybe it would help you too?
if( condition ){
code indented
indentation of closing bracket
matches indentation of if/else statement
}elseif( more conditions ){
code indented
if( other condition ){
nested code
}
}else{
codecodecodecodecodecodecode
}

[Jamie.ds]

Well couldn't find the mismatched bracket so re wrote it and made it cleaner. Thank you for the help ^^

if (hlength == "0"){
if (mlength == "0"){
if (blength == "0"){
alert("You must enter a phone number.");
result = false;
}else if (blength == "11"){
if (businessNumber.match(numeric)){
result = true;
}else{
alert("You business number must only contain numbers.");
result = false;
}
}else {
alert("You must input a valid Business number");
result = false;
}
}else if (mlength == "11"){
if (mobileNumber.match(numeric)){
result = true;
}else{
alert("You mobile number must only contain numbers.");
result = false;
}
}else {
alert("You must input a valid Mobile number");
result = false;
}
}else if (hlength == "11"){
if (homeNumber.match(numeric)){
result = false;
}else{
alert("You home number must only contain numbers.");
result = false;
}
}else {
alert("You must input a valid Home number");
result = false;
}

[traq]

else {
alert("There must be 11 digits in the Business number field");
return false;
}
}else if (mlength == "11"){
I didn't check if any others were missing. I'm glad you got it working!