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

JavaScript and client side scripting.

Moderator: General Moderators

WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

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

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
eyespark
Forum Commoner
Posts: 50
Joined: Tue Jan 24, 2006 7:36 am

Post 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>
Last edited by eyespark on Fri Feb 03, 2006 4:43 pm, edited 1 time in total.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Moved to Client-Side.
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post 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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post 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).
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post 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)
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post 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).
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post 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
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

no it isn't...I just tested it 8O

http://www.burritostand.com/test.htm
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

create a string of 'unwanted' chars then use indexOf().
Post Reply