Form Validation on Submit

dfowler · September 25, 2008

Hey guys,

I have the following form that allows the user to see if they have inputted the correct information as they fill out the form. This works great, because as they fill everything out; they will know whether they did it correctly or not. I want to now add the ability that when the form is submitted it checks again to make sure the correct information is inputted. Somebody might ignore the error message as they fill out the form, so I feel this second check is needed. My problem is that the code for the onSubmit check doesn't seem to work. The following is the form and javascript minus the onSubmit code as I know it works. I don't know if the code was conflicting or what. I'm hoping to have the same functionality where if they try to submit and something is wrong, an error message will show up in the div. Thanks for any help!

validate.js

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;'>Please enter a number in this format: 555-555-5555.</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;'>Please use a correct email format.</span>";
	} else {
		document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
	}
} else if (value_1 == "terms") {
	if(document.forms[0].elements[value_1].checked == true) {
		document.forms[0].submit.disabled = false;
	} else {
		document.forms[0].submit.disabled = true;
	}	
} else { 
	if(inameValue=="") {
		document.getElementById(value_2).innerHTML = "<span style='color:red;'>Please complete all fields.</span>";
	} else {
		document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
	}
} 
}

the form

<html>
<head>
	<title>Test Form</title>
	<script type="text/javascript" src="validate.js"></script>
</head>
<body>
	<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>
			<tr>
				<td colspan="2" style="text-align:right;">
					<input type="checkbox" name="terms" id="terms" value="1" onclick="showRequired('terms','t_message');" /> I agree to the Terms and Conditions
				</td>
				<td><div id="t_message"></div></td>
			</tr>
			<tr>
				<td> </td>
				<td><input type="submit" name="submit" id="submit" value="Continue To Step 2" disabled /></td>
				<td> </td>
			</tr>
		</table>
	</form>
</body>
</html>

F1Fan · September 25, 2008

On your submit button(s), add an onclick event that calls a JS function that checks the fields. The function could alert the user of their errors. If there are errors, the function should return false, otherwise return true.

Example:

<input type="submit" name="submit" id="submit" value="Continue To Step 2" onclick="return validateFunc();">

DON'T forget the "return" part, or it won't work.

Then:

function validateFunc(){
  if (document.getElementById('somefield').value==""){
    alert ("You idiot! You didn't fill everything in!!!");
    return false;
  }
  else{
    return true;
  }
}

dfowler · September 25, 2008

On your submit button(s), add an onclick event that calls a JS function that checks the fields. The function could alert the user of their errors. If there are errors, the function should return false, otherwise return true.

Example:
<input type="submit" name="submit" id="submit" value="Continue To Step 2" onclick="return validateFunc();">
DON'T forget the "return" part, or it won't work.

Then:
function validateFunc(){
  if (document.getElementById('somefield').value==""){
    alert ("You idiot! You didn't fill everything in!!!");
    return false;
  }
  else{
    return true;
  }
}

Can set this up to loop through all the form fields? I am going to use the same logic to check the fields, but I need to loop through the form upon submission.

F1Fan · September 25, 2008

Sure. Just modify the JS function to check all the fields you want, even create a loop to do it.

dfowler · September 25, 2008

Ok, here is what I have come up with so far. It works (to a degree).

function validateForm(){
for(i=0;i<=document.form.length;i++) {
	if(document.form.elements[i].value=="") {
		alert("Error!");
		return false;
	}
}
}

I can't seem to figure out how to use the innerHTML like I did before (which what I am hoping to do). The alert was just a way to make sure it worked. I am also having a hard time with the logic for including the email and phone field into the loop. I tried simply adding another if statement with the following:

var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
	if (emailfilter.test(document.form.elements['email'])==false) {

That didn't work though....

F1Fan · September 25, 2008

Assuming there's a div next to each required element, just add the same statement to where your alert is now. Like this:

function validateForm(){
var errors = 0;
for(i=0;i<=document.form.length;i++) {
	if(document.form.elements[i].value=="") {
		document.getElementById('someotherid').innerHTML = "<span style='color:red;'>Please enter a number in this format: 555-555-5555.</span>";
		errors++;
	}
}
if (errors==0){
	return true;
}
else{
	return false;
}
}

Also, you were adding the false inside the loop and you need a return true for it to submit properly, which I added a way to do that.

dfowler · September 26, 2008

Assuming there's a div next to each required element, just add the same statement to where your alert is now. Like this:
function validateForm(){
var errors = 0;
for(i=0;i<=document.form.length;i++) {
	if(document.form.elements[i].value=="") {
		document.getElementById('someotherid').innerHTML = "<span style='color:red;'>Please enter a number in this format: 555-555-5555.</span>";
		errors++;
	}
}
if (errors==0){
	return true;
}
else{
	return false;
}
}
Also, you were adding the false inside the loop and you need a return true for it to submit properly, which I added a way to do that.

The false in the loop is fine, because it is in the if statement. Therefore, if there is an error it will return false. Otherwise everything works fine. Also, you can see the form in the first post, and so you can see the divs. Using getElementById won't work as each div has a different id. I am trying to make this as dynamic as possible.

--EDIT

Ok I see what you mean now. If they have multiple fields incorrect, the false has to be outside the loop to display the error messages correctly. I am working to fix this now. I still can't get the email and phone to check correctly, and I still can't get the innerHTML to work.

F1Fan · September 26, 2008

Are you seeing any JavaScript errors when it runs?

dfowler · September 26, 2008

Are you seeing any JavaScript errors when it runs?

No, right now it is looping through and not stopping the form from submitting. Here is the javascript now:

function validateForm(){
var errors=0;
for(var i=0;i<=document.form.length;i++) { //only the input fields
	elmID=document.form.elements[i].id;
	elmValue = document.form.elements[i].value;
	if(elmValue=="") {
		document.getElementById(elmID+'_message').innerHTML =  "<span style='color:red;'>Please complete all fields.</span>";
		errors++;
	} else {
		document.getElementById(elmID+'_message').innerHTML = "<span style='color:green;'>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) {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:red;'>Please use a correct email format.</span>";
			errors++;
		} else {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:green;'>Ok!</span>";
		}
	}
	if (elmID=="phone") {
		var returnval=elmValue.search(/\d{3}\-\d{3}\-\d{4}/);
		if(returnval==-1) {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:red;'>Please enter a number in this format: 555-555-5555.</span>";
			errors++;
		} else {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:green;'>Ok!</span>";
		}
	}
}
if(errors!=0) {
	return false;
} else {
	return true;
}
}

F1Fan · September 26, 2008

Show me your HTML. Also, just for a test, change both returns to false, and alert the error var to see if it's really catching any errors.

dfowler · September 29, 2008

Ok here is my code again:

the form:

<html>
<head>
	<title>Test Form</title>
	<script type="text/javascript" src="validate.js"></script>
</head>
<body>
	<form name="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>
			<tr>
				<td colspan="2" style="text-align:right;">
					<input type="checkbox" name="terms" id="terms" value="1" onclick="showRequired('terms','t_message');" /> I agree to the Terms and Conditions
				</td>
				<td><div id="terms_message"></div></td>
			</tr>
			<tr>
				<td> </td>
				<td><input type="submit" name="submit" id="submit" value="Continue To Step 2" onclick="return validateForm();" disabled /></td>
				<td> </td>
			</tr>
		</table>
	</form>
</body>
</html>

validate.js

function showRequired(value_1,value_2) {
inameValue = document.form.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;'>Please enter a number in this format: 555-555-5555.</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;'>Please use a correct email format.</span>";
	} else {
		document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
	}
} else if (value_1 == "terms") {
	if(document.form.elements[value_1].checked == true) {
		document.forms[0].submit.disabled = false;
	} else {
		document.forms[0].submit.disabled = true;
	}	
} else { 
	if(inameValue=="") {
		document.getElementById(value_2).innerHTML = "<span style='color:red;'>Please complete all fields.</span>";
	} else {
		document.getElementById(value_2).innerHTML = "<span style='color:green;'>Ok!</span>";
	}
} 
}

function validateForm(){
errors=0;
for(var i=0;i<=document.form.length;i++) { //only the input fields
	elmID=document.form.elements[i].id;
	elmValue = document.form.elements[i].value;
	if(elmValue=="") {
		document.getElementById(elmID+'_message').innerHTML =  "<span style='color:red;'>Please complete all fields.</span>";
		errors++;
	} else {
		document.getElementById(elmID+'_message').innerHTML = "<span style='color:green;'>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) {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:red;'>Please use a correct email format.</span>";
			errors++;
		} else {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:green;'>Ok!</span>";
		}
	}
	if (elmID=="phone") {
		var returnval=elmValue.search(/\d{3}\-\d{3}\-\d{4}/);
		if(returnval==-1) {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:red;'>Please enter a number in this format: 555-555-5555.</span>";
			errors++;
		} else {
			document.getElementById(elmID+'_message').innerHTML = "<span style='color:green;'>Ok!</span>";
		}
	}
}
if(errors==0) {
	return true;
} else {
	return false;
}
}

dfowler · September 29, 2008

Got it to work! I had to modify the loop to the following:

for(var i=0;i<=document.form.length-3;i++)

helifreaker · October 3, 2008

HI have some can help solve the problem, in form have 2 text area first area is data and i need check date format must YYYY-MM-DD before sumbit and second area i need put 5 char before sumbit how to i put the jayascript???? PLEASE NOT USE THE EXTENSION (validation form Yaromat.com)on micromedia dreamweaver when i use the script in my micromedia dreamweaver split can't type the (F word and D word) try type 3 or 4 time the automatic link to (yaromat .com website)

below is my script

<!--

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function YY_checkform() { //v4.66

var args = YY_checkform.arguments; var myDot=true; var myV=''; var myErr='';var addErr=false;var myReq;

for (var i=1; i<args.length;i=i+4){

if (args[i+1].charAt(0)=='#'){myReq=true; args[i+1]=args[i+1].substring(1);}else{myReq=false}

var myObj = MM_findObj(args.replace(/\[\d+\]/ig,""));

myV=myObj.value;

if (myObj.type=='text'||myObj.type=='password'||myObj.type=='hidden'){

if (myReq&&myObj.value.length==0){addErr=true}

if ((myV.length>0)&&(args[i+2]==1)){ //fromto

var myMa=args[i+1].split('_');if(isNaN(myV)||myV<myMa[0]/1||myV > myMa[1]/1){addErr=true}

} else if ((myV.length>0)&&(args[i+2]==2)){

var rx=new RegExp("^[\\w\.=-]+@[\\w\\.-]+\\.[a-z]{2,4}$");if(!rx.test(myV))addErr=true;

} else if ((myV.length>0)&&(args[i+2]==3)){ // date

var myMa=args[i+1].split("#"); var myAt=myV.match(myMa[0]);

if(myAt){

var myD=(myAt[myMa[1]])?myAt[myMa[1]]:1; var myM=myAt[myMa[2]]-1; var myY=myAt[myMa[3]];

var myDate=new Date(myY,myM,myD);

if(myDate.getFullYear()!=myY||myDate.getDate()!=myD||myDate.getMonth()!=myM){addErr=true};

}else{addErr=true}

} else if ((myV.length>0)&&(args[i+2]==4)){ // time

var myMa=args[i+1].split("#"); var myAt=myV.match(myMa[0]);if(!myAt){addErr=true}

} else if (myV.length>0&&args[i+2]==5){ // check this 2

var myObj1 = MM_findObj(args[i+1].replace(/\[\d+\]/ig,""));

if(myObj1.length)myObj1=myObj1[args[i+1].replace(/(.*\[)|(\].*)/ig,"")];

if(!myObj1.checked){addErr=true}

} else if (myV.length>0&&args[i+2]==6){ // the same

var myObj1 = MM_findObj(args[i+1]);

if(myV!=myObj1.value){addErr=true}

}

} else

if (!myObj.type&&myObj.length>0&&myObj[0].type=='radio'){

var myTest = args.match(/(.*)\[(\d+)\].*/i);

var myObj1=(myObj.length>1)?myObj[myTest[2]]:myObj;

if (args[i+2]==1&&myObj1&&myObj1.checked&&MM_findObj(args[i+1]).value.length/1==0){addErr=true}

if (args[i+2]==2){

var myDot=false;

for(var j=0;j<myObj.length;j++){myDot=myDot||myObj[j].checked}

if(!myDot){myErr+='* ' +args[i+3]+'\n'}

}

} else if (myObj.type=='checkbox'){

if(args[i+2]==1&&myObj.checked==false){addErr=true}

if(args[i+2]==2&&myObj.checked&&MM_findObj(args[i+1]).value.length/1==0){addErr=true}

} else if (myObj.type=='select-one'||myObj.type=='select-multiple'){

if(args[i+2]==1&&myObj.selectedIndex/1==0){addErr=true}

}else if (myObj.type=='textarea'){

if(myV.length<args[i+1]){addErr=true}

}

if (addErr){myErr+='* '+args[i+3]+'\n'; addErr=false}

}

if (myErr!=''){alert('The required information is incomplete or contains errors:\t\t\t\t\t\n\n'+myErr)}

document.MM_returnValue = (myErr=='');

}

//-->

</script>

<body>

<form action="<?php echo $editFormAction; ?>" method="POST" name="frm_add" id="frm_add">

<table width="650" border="1" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><h1>Date : </h1></td>

<em>(YYYY-MM-DD)</em></td>

</tr>

<tr>

<td><h1>Information :</h1></td>

<td><textarea name="information" cols="60" rows="7" id="information" onblur="YY_checkform('frm_add','information','5','1','Field \'information\' is not valid.');return document.MM_returnValue" >

</textarea></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" name="Submit" value="Submit" />

<input type="reset" name="Submit2" value="Reset" /></td>

</tr>

</table>

<input type="hidden" name="MM_insert" value="frm_add">

</form><form action="<?php echo $editFormAction; ?>" method="POST" name="frm_add" id="frm_add">

<table width="650" border="1" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><h1>Date : </h1></td>

<em>(YYYY-MM-DD)</em></td>

</tr>

<tr>

<td><h1>Information :</h1></td>

<td><textarea name="information" cols="60" rows="7" id="information" onblur="YY_checkform('frm_add','information','5','1','Field \'information\' is not valid.');return document.MM_returnValue" >

</textarea></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" name="Submit" value="Submit" />

<input type="reset" name="Submit2" value="Reset" /></td>

</tr>

</table>

<input type="hidden" name="MM_insert" value="frm_add">

</form>

helifreaker · October 3, 2008

HI have some can help solve the problem, in form have 2 text area first area is data and i need check date format must YYYY-MM-DD before sumbit and second area i need put 5 char before sumbit how to i put the jayascript???? PLEASE NOT USE THE EXTENSION (validation form Yaromat.com u can felt sunddeny go to this page http://engines.instantis.com/SiteWand/Login/loadForm)on micromedia dreamweaver when i use the script in my micromedia dreamweaver split can't type the (F word and D word) try type 3 or 4 time the automatic link to (yaromat .com website)

below is my script

<script type="text/JavaScript">



</script>

<body>

<form action="<?php echo $editFormAction; ?>" method="POST" name="frm_add" id="frm_add">

<table width="650" border="1" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><h1>Date : </h1></td>

<td><input name="Date" type="text" id="Date" onblur="YY_checkform('frm_add','Date','#^$[0-9]{4}$\\-$[0-9][0-9]$\\-$[0-9][0-9]$$#3#2#1','3','Field \'Date\' is not valid.');return document.MM_returnValue" value="YYYY-MM-DD" size="30" />

<em>(YYYY-MM-DD)</em></td>

</tr>

<tr>

<td><h1>Information :</h1></td>

<td><textarea name="information" cols="60" rows="7" id="information" onblur="YY_checkform('frm_add','information','5','1','Field \'information\' is not valid.');return document.MM_returnValue" >

</textarea></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" name="Submit" value="Submit" />

<input type="reset" name="Submit2" value="Reset" /></td>

</tr>

</table>

<input type="hidden" name="MM_insert" value="frm_add">

</form><form action="<?php echo $editFormAction; ?>" method="POST" name="frm_add" id="frm_add">

<table width="650" border="1" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><h1>Date : </h1></td>

<td><input name="Date" type="text" id="Date" onblur="YY_checkform('frm_add','Date','#^$[0-9]{4}$\\-$[0-9][0-9]$\\-$[0-9][0-9]$$#3#2#1','3','Field \'Date\' is not valid.');return document.MM_returnValue" value="YYYY-MM-DD" size="30" />

<em>(YYYY-MM-DD)</em></td>

</tr>

<tr>

<td><h1>Information :</h1></td>

<td><textarea name="information" cols="60" rows="7" id="information" onblur="YY_checkform('frm_add','information','5','1','Field \'information\' is not valid.');return document.MM_returnValue" >

</textarea></td>

</tr>

<tr>

<td> </td>

<td><input type="submit" name="Submit" value="Submit" />

<input type="reset" name="Submit2" value="Reset" /></td>

</tr>

</table>

<input type="hidden" name="MM_insert" value="frm_add">

</form>

Sign In

Form Validation on Submit

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information