Page 1 of 4

Forms - How to check for all required fields are filled out

Posted: Fri Feb 03, 2006 4:15 pm
by WizyWyg
I have a form that I have on form.php and then processed on process.php

I want to have the form, check for all the fields that are requied to be filled before "submit" on form.php . So when they hit submit, a pop up should come up warning them that "such and such" isn't filled out and press "ok".

What would be the code for it?

also, I want to "clear" the fields of the form, should a visitor press the "back" button after submit.

Posted: Fri Feb 03, 2006 4:32 pm
by RobertGonzalez
This is a Client-Side question. You are going to want to use JavaScript to check the information if you want to achieve what you are asking. You can do this with PHP, but the checking comes after the form is posted.

Search the "client-side" forums here for form field validation and see if anything comes up.

Posted: Fri Feb 03, 2006 4:37 pm
by eyespark
Here you go:

Code: Select all

<form method="post" action="register.php" onSubmit="return validate(this)">
<table width="420">
  <tr><td>Login name:</td><td> <input type="text" name="uname" id="uname"></td></tr>
  <tr><td>Username:</td><td> <input type="text" name="name"></td></tr>
  <tr><td><input type="submit" name="submit" value="Send"></td><td></td></tr>
</table>
</form>
<script>
function validate(thisform){
var isvalid = true;
		
	if(thisform.uname.value.length <3){
	alert("At least 3 characters please");
		isvalid = false
		thisform.uname.focus();
	}
	if(isvalid){
	var re = /^[a-zA-Z0-9]+$/;
	if(!re.test(thisform.uname.value)){
		alert("Only numbers and characters please");
		isvalid = false
		thisform.uname.focus();
	}
	}
	if(thisform.name.value.length <3){
	alert("At least 3 characters please");
		isvalid = false
		thisform.uname.focus();
	}
return isvalid;
}
</script>

Posted: Fri Feb 03, 2006 4:37 pm
by John Cartwright
Moved to Client-Side.

Posted: Fri Feb 03, 2006 5:10 pm
by WizyWyg
eyespark wrote:Here you go:

Code: Select all

<form method="post" action="register.php" onSubmit="return validate(this)">
<table width="420">
  <tr><td>Login name:</td><td> <input type="text" name="uname" id="uname"></td></tr>
  <tr><td>Username:</td><td> <input type="text" name="name"></td></tr>
  <tr><td><input type="submit" name="submit" value="Send"></td><td></td></tr>
</table>
</form>
<script>
function validate(thisform){
var isvalid = true;
		
	if(thisform.uname.value.length <3){
	alert("At least 3 characters please");
		isvalid = false
		thisform.uname.focus();
	}
	if(isvalid){
	var re = /^[a-zA-Z0-9]+$/;
	if(!re.test(thisform.uname.value)){
		alert("Only numbers and characters please");
		isvalid = false
		thisform.uname.focus();
	}
	}
	if(thisform.name.value.length <3){
	alert("At least 3 characters please");
		isvalid = false
		thisform.uname.focus();
	}
return isvalid;
}
</script>
Thanks for the code, but its not working. Its still processing the form. no warnings come up

how would I set it up to check "select" boxes that have a "default" value?

Posted: Fri Feb 03, 2006 5:16 pm
by Burrito
that snippet allows for values to be set, it only checks to see if the field values are less than three.

what you really shoud do is build an array of the fields you want checked, then loop over the array and check to see if the value is set...at all.

if not, append some text to a string and then alert the string when it's done.

Posted: Fri Feb 03, 2006 5:29 pm
by Burrito
I'm thinking you won't understand what I meant in that last post...so I just wrote something up for you :D

tested...

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<script>
var reqfields = Array("somefield","somefield2");
function checkIt()
{
	var msg = "You are missing required information.  The information you're missing is listed below \n\n";
	for(var i=0;i<reqfields.length;i++)
	{
		theField = document.MyForm[reqfields[i]];
		if(theField.value == "")
			msg += "You are missing info for field "+i+" \n";
	}
	if(msg.length > 90)
	{
		alert(msg);
		return false;
	}
	return true;
}
</script>
</head>

<body>
<form name="MyForm" onSubmit="return checkIt()">
<input type="text" name="somefield"><br>
<select name="somefield2">
<option value=""></option>
<option value="1">1</option>
</select><br>
<input type="submit" value="go">
</form>


</body>
</html>

Posted: Fri Feb 03, 2006 6:01 pm
by WizyWyg
This is for your original code posted earlier:

I narrowed it down to why it was submitting anyway, and it has to do with this:

Code: Select all

if(isvalid){
   var re = /^[a-zA-Z]+$/;
   if(!re.test(thisform.Firstname.value)){
      alert("Only letters for your first name please");
      isvalid = false
      thisform.Firstname.focus();
   }
For a reason, I dont know, this is not "working" and is submitting the form (ignoring the rest of the form if the fields are left blank).

Posted: Fri Feb 03, 2006 6:16 pm
by WizyWyg
Burrito wrote:I'm thinking you won't understand what I meant in that last post...so I just wrote something up for you :D

tested...

Code: Select all

msg += "You are missing info for field "+i+" \n";
for the above, it returns numbers instead of the field names.
ie You missing infor for field 0, You missing infor for field 1, You missing infor for field 2, etc


And I also like to check for unwanted characters, etc (like it tried to do with your first example)

Posted: Fri Feb 03, 2006 6:55 pm
by Burrito
yeah, it just returns the iteration in the loop.


I'm trying to promote some thought on his / her part.
s/he'd have to add something to array delimited by some set of chars then split that set of chars to display what is missing

ex:

Code: Select all

var reqfields = Array("somefield::Field 1","somefield2::Field 2");
then in the loop

Code: Select all

reqfields = reqfields.split("::");

// now has an array with key 1 being the missing field info

Posted: Fri Feb 03, 2006 7:03 pm
by WizyWyg
Burrito wrote:yeah, it just returns the iteration in the loop.

then in the loop

Code: Select all

reqfields = reqfields.split("::");

// now has an array with key 1 being the missing field info
Where in the loop? I've placed it after almost every line in the for... and it ends up making the form submit (overrides the check).

Posted: Fri Feb 03, 2006 7:14 pm
by Burrito
here:

untested...

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<head> 
<title>Untitled</title> 
<script> 
var reqfields = Array("somefield::Field Number 1","somefield2::Field Number 2"); 
function checkIt() 
{ 
	var msg = "You are missing required information.  The information you're missing is listed below \n\n"; 
	for(var i=0;i<reqfields.length;i++) 
	{ 
		thStuff = reqfields[i].split("::");
		thText = thStuff[1];
		thName = thStuff[0];
		theField = document.MyForm[thName]; 
		if(theField.value == "") 
			msg += thText+" Is Missing required information blah blah blah \n"; 
	} 
	if(msg.length > 90) 
	{ 
		alert(msg); 
		return false; 
	} 
	return true; 
} 
</script> 
</head> 

<body> 
<form name="MyForm" onSubmit="return checkIt()"> 
<input type="text" name="somefield"><br> 
<select name="somefield2"> 
<option value=""></option> 
<option value="1">1</option> 
</select><br> 
<input type="submit" value="go"> 
</form> 


</body> 
</html>

Posted: Fri Feb 03, 2006 7:19 pm
by WizyWyg
edit : take that back. I mispelt one of the fields.

Cool, its checking. Now how do I get it to check for unwanted characters (ie ;.:'"!@#%$^&*) etc

Posted: Fri Feb 03, 2006 7:22 pm
by Burrito
no it isn't...I just tested it 8O

http://www.burritostand.com/test.htm

Posted: Fri Feb 03, 2006 7:25 pm
by Burrito
create a string of 'unwanted' chars then use indexOf().