AJAX Validate Form

[dfowler]

Hey guys,

I'm have a basic form that I would like to try and improve.  Here is the form code below (it's a basic form):

<form action="step2.php" method="post">
<table>
<tr>
<td>First Name: </td>
<td><input type="text" name="f_name" value="<?php echo $_SESSION['f_name']; ?>" /></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" name="l_name" value="<?php echo $_SESSION['l_name']; ?>" /></td>
</tr>
<tr>
<td>Phone: </td>
<td><input type="text" name="phone" value="<?php echo $_SESSION['phone']; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="email" value="<?php echo $_SESSION['email']; ?>" /></td>
</tr>
</table>
</form>

 

When the form is submitted the next page checks the fields for validation (whether fields are empty and if phone and email are in correct format).  I was hoping to use some AJAX to check the fields directly.  My thought process is that when a user inputs information the form is validated right there and a hidden div will display a message or an image stating whether it is ok or not.  I would assume this is something that can be done with AJAX, but I'm not really sure.  Thanks for any information!

[CroNiX]

AJAX is for sending/receiving backend requests to the server.  What you want to do is use javascript (not ajax) for your form validation.  This takes place within the client browser, not the server.  It is great for PRECHECKING your values, but not the real validation.  If somebody has javascript turned off it will never be validated.  So, first check your form with javascript, then when the form is submitted ALWAYS validate again on the server.

 

If you want, you can validate your form with javascript, and if it passes validation then use AJAX to send the form data to a script that will then validate again, and send the response back via AJAX to the browser updating a message that it was saved or whatever.

[dfowler]

AJAX is for sending/receiving backend requests to the server.  What you want to do is use javascript (not ajax) for your form validation.  This takes place within the client browser, not the server.  It is great for PRECHECKING your values, but not the real validation.  If somebody has javascript turned off it will never be validated.  So, first check your form with javascript, then when the form is submitted ALWAYS validate again on the server.

 

If you want, you can validate your form with javascript, and if it passes validation then use AJAX to send the form data to a script that will then validate again, and send the response back via AJAX to the browser updating a message that it was saved or whatever.

 

I'm a little confused with this.  By using the above method will I be able to have the functionality I am looking for?  I'm hoping for something similar to the following example:

 

The user enters 'aaaaaaaaa' or '12345' in the phone input, I'm hoping to open a div or something next to it that will say "Please enter a phone number in this format 555-555-5555", or something similar.  If the user enters '555-555-5555' then the div will just have like an image with a green check.

[dfowler]

Ok, it seems you were correct and I could use regular javascript.  I tried a little coding work myself, and here is what I have:

 

		<script type="text/javascript">
		function showRequired(value_1,value_2) {
			inameValue = document.forms[0].elements[value_1].value;
			var_1 = document.getElementById(value_1);

			if (var_1 == f_name) {
   				if(inameValue="")
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
				}
			}

			if (var_1 == l_name) {
   				if(inameValue=="")
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
				}
			}				

			if (var_1 == phone) {
				var returnval=inameValue.search(/\d{3}\-\d{3}\-\d{4}/);
   				if(returnval==-1)
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
				}
			}

			if (var_1 == email) {
				var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
				var returnval=emailfilter.test(inameValue)
				if (returnval==false){
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
				}
			}
		}
	</script>
	<form action="step2.php" method="post">
		<table>
			<tr>
				<td>First Name: </td>
				<td><input type="text" name="f_name" id="f_name" value="<?php echo $_SESSION['f_name']; ?>" onblur="showRequired('f_name','f_name_message');" /></td>
				<td><div id="f_name_message"></div></td>
			</tr>
			<tr>
				<td>Last Name: </td>
				<td><input type="text" name="l_name" id="l_name" value="<?php echo $_SESSION['l_name']; ?>" onblur="showRequired('l_name','l_name_message');" /></td>
				<td><div id="l_name_message"></div></td>
			</tr>
			<tr>
				<td>Phone: </td>
				<td><input type="text" name="phone" id="phone" value="<?php echo $_SESSION['phone']; ?>" onblur="showRequired('phone','phone_message');" /></td>
				<td><div id="phone_message"></div></td>
			</tr>
			<tr>
				<td>Email: </td>
				<td><input type="text" name="email" id="email" value="<?php echo $_SESSION['email']; ?>" onblur="showRequired('email','email_message');" /></td>
				<td><div id="email_message"></div></td>
			</tr>
		</table>
	</form>

 

The problem is this, it isn't working.  If I comment out everything but the email check the email check works, however nothing else works.  I'm not sure what I am doing wrong here and would love some feedback.  Thanks!

[gethinw]

You need extra quotes in places and to check for typos - "if (var_1 == f_name)" should be "if (var_1 == "f_name")", and "if(inameValue="")" should be "if(inameValue=="")" for a start.

[dfowler]

Just some mistakes, thanks.  I've modified the code to this, still no results:

 

		<script type="text/javascript">
		function showRequired(value_1,value_2) {
			inameValue = document.forms[0].elements[value_1].value;

			/* if (value_1 == "phone") {
				var returnval=inameValue.search(/\d{3}\-\d{3}\-\d{4}/);
   				if(returnval==-1)
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>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){
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
				}
			} /* else {
   				if(inameValue=="")
					document.getElementById(value_2).innerHTML = "<span style='color:red;'>Error!</span>";
				} else {
					document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
				}
			} */
		}
	</script>

 

I have the comments in there as the email check works, when I try the other two they don't......

[dfowler]

Fixed it, had a } left out!