Form Validation Help

[dfowler]

Hey guys, I created a form awhile ago that I have had to update.  Now I need to modify my validation to work correctly and i'm not sure how to do that.  Here is the form istelf:

 

<form action="step2.php" method="post">
		<table>
			<tr>
				<td class="form">First Name: </td>
			   	<td id="f_name_field"><input name="billTo_firstName" type="text" class="formInput" id="f_name" onBlur="showRequired('f_name');" /></td>
				<td><div id="f_name_message"></div></td>
			</tr>
			<tr>
				<td class="form">Last Name: </td>
			   	<td id="l_name_field"><input name="billTo_lastName" type="text" class="formInput" id="l_name" onBlur="showRequired('l_name');" /></td>
				<td><div id="l_name_message"></div></td>
			</tr>
			<tr>
				<td class="form">Phone: </td>
				<td id="phone_field"><input name="billTo_phoneNumber" type="text" class="formInput" id="phone" onBlur="showRequired('phone');" maxlength="12" /></td>
				<td><div id="phone_message"></div></td>
			</tr>
			<tr>
				<td class="form">Email: </td>
			   	<td id="email_field"><input name="billTo_email" type="text" class="formInput" id="email" onBlur="showRequired('email');" /></td>
				<td><div id="email_message"></div></td>
			</tr>
			<tr>
				<td class="form">Company: </td>
			   	<td><input name="billTo_company" type="text" class="formInput" id="billTo_company" /></td>
			</tr>
			<tr>
				<td colspan="2" class="form" style="text-align:right;">
					<input type="checkbox" name="terms" id="terms" value="1" onClick="showRequired('terms');" /> I agree to the Terms and Conditions					</td>
		   	</tr>
			<tr>
				<td> </td>
				<td><input name='submit' type='image' id='submit' value='' src='images/butTest.gif' onClick='return validateForm();' /></td>
				<td> </td>
			</tr>
		</table>
	</form>

 

Here is the javascript:

function showRequired(value_1) {
inameValue = document.getElementById(value_1).value;

if (value_1 == "phone") {
	var returnval=inameValue.search(/\d{3}\-\d{3}\-\d{4}/);
	if(returnval==-1) {
		newImage="url(images/false.gif)";
		document.getElementById(value_1+'_field').style.backgroundImage=newImage;
		document.getElementById(value_1+'_message').innerHTML = "<span class='false'>Please enter a number in this format: 555-555-5555.</span>";
	} else {
		newImage="url(images/true.gif)";
		document.getElementById(value_1+'_field').style.backgroundImage=newImage;
		document.getElementById(value_1+'_message').innerHTML = "<span class='true'>Ok!</span>";
	}
} else if (value_1 == "email") {
	var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
	var returnval=emailfilter.test(inameValue);
	if (returnval==false) {
		newImage="url(images/false.gif)";
		document.getElementById(value_1+'_field').style.backgroundImage=newImage;
		document.getElementById(value_1+'_message').innerHTML = "<span class='false'>Please use a correct email format.</span>";
	} else {
		newImage="url(images/true.gif)";
		document.getElementById(value_1+'_field').style.backgroundImage=newImage;
		document.getElementById(value_1+'_message').innerHTML = "<span class='true'>Ok!</span>";
	}
} else {
	if(inameValue=="") {
		newImage="url(images/false.gif)";
		document.getElementById(value_1+'_field').style.backgroundImage=newImage;
		document.getElementById(value_1+'_message').innerHTML = "<span class='false'>Please complete all fields.</span>";
	} else {
		var regularexpression = new RegExp("[^A-Za-z]");
		var returnval=regularexpression.test(inameValue);
		if (returnval==true) {
			newImage="url(images/false.gif)";
			document.getElementById(value_1+'_field').style.backgroundImage=newImage;
			document.getElementById(value_1+'_message').innerHTML = "<span class='false'>Only letters allowed.</span>";
		} else {
			newImage="url(images/true.gif)";
			document.getElementById(value_1+'_field').style.backgroundImage=newImage;
			document.getElementById(value_1+'_message').innerHTML = "<span class='true'>Ok!</span>";
		}
	}
} 
}

function validateForm(){
errors=0;
for(var i=0;i<=document.form.length-3;i++) { //only the required fields
	elmID=document.form.elements[i].id;
        	elmValue = document.form.elements[i].value;
	if(elmValue=="") {
		newImage="url(images/false.gif)";
		document.getElementById(elmID+'_field').style.backgroundImage=newImage;
		document.getElementById(elmID+'_message').innerHTML =  "<span class='false'>Please complete all fields.</span>";
		errors++;
	} else {
		if (elmID == "f_name" || elmID == "l_name") {
			var regularexpression = new RegExp("[^A-Za-z]");
			var returnval=regularexpression.test(elmValue);
			if (returnval==true) {
				newImage="url(images/false.gif)";
				document.getElementById(elmID+'_field').style.backgroundImage=newImage;
				document.getElementById(elmID+'_message').innerHTML = "<span class='false'>Only letters allowed.</span>";
			} else {
				newImage="url(images/true.gif)";
				document.getElementById(elmID+'_field').style.backgroundImage=newImage;
				document.getElementById(elmID+'_message').innerHTML = "<span class='true'>Ok!</span>";
			}
		}
	}
	if (elmID=="email") {
		var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
		var returnval=emailfilter.test(elmValue)
		if (returnval==false) {
			newImage="url(images/false.gif)";
			document.getElementById(elmID+'_field').style.backgroundImage=newImage;
			document.getElementById(elmID+'_message').innerHTML = "<span class='false'>Please use a correct email format.</span>";
			errors++;
		} else {
			newImage="url(images/true.gif)";
			document.getElementById(elmID+'_field').style.backgroundImage=newImage;
			document.getElementById(elmID+'_message').innerHTML = "<span class='true'>Ok!</span>";
		}
	}
	if (elmID=="phone") {
		var returnval=elmValue.search(/\d{3}\-\d{3}\-\d{4}/);
		if(returnval==-1) {
			newImage="url(images/false.gif)";
			document.getElementById(elmID+'_field').style.backgroundImage=newImage;
			document.getElementById(elmID+'_message').innerHTML = "<span class='false'>Please enter a number in this format: 555-555-5555.</span>";
			errors++;
		} else {
			newImage="url(images/true.gif)";
			document.getElementById(elmID+'_field').style.backgroundImage=newImage;
			document.getElementById(elmID+'_message').innerHTML = "<span class='true'>Ok!</span>";
		}
	}
}
    if(!errors) {
	return true;
} else {
	return false;
}
}

 

Here are my new problems.  The submit button has changed to an image, and it seems the onClick validation no longer works.  Also, I need to modify the first name and last name fields to allow a single - or a signle '.  Does anybody know how to include this as well.  Thanks for any help!

[dfowler]

Ok, I modified the RegExp field and it is now: RegExp("[^A-Za-z'-]")

 

The problem is that this is allowing unlimited ' and -.  I am trying to figure out how to only check for 1 max of each in the fields.  I still can't figure out why the onClick validation isn't working either.

[Andy17]

Sorry, I'm not really a JavaScript hero, but I just want to remind you to not use JavaScript only for validation; ALWAYS use server-side validation and then you can additionally use JavaScript apart from that. Maybe you know this, but just making sure as it's very important.

[dfowler]

Sorry, I'm not really a JavaScript hero, but I just want to remind you to not use JavaScript only for validation; ALWAYS use server-side validation and then you can additionally use JavaScript apart from that. Maybe you know this, but just making sure as it's very important.

Oh yeah, this form will be validated again upon submission.  Basically the form will be validated 3 times.  Once while the user is filling out the form, once when they hit submit, and a final time after it has been submitted.  Still can't get the onClick to work.  It worked fine when it was:

 

<input type="submit" onClick="return validateForm()" />

 

Now that it is an image it doesn't work at all.....

[dfowler]

Still working with this.  I tried modifying the code a little, but didn't have any luck so I went back to where I was at the beginning.  I don't understand how just changing

 

<input type="submit" name="submit" id="submit" value="Submit" onClick="return validateForm();" />

 

to:

 

<input type="image" name="submit" id=submit" src="submit.gif" onClick="return validateForm();" />

 

could break everything.  Still not sure how to only check for one ' or - either.