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

Post by WizyWyg »

Burrito wrote:create a string of 'unwanted' chars then use indexOf().
sorry, Im not familiar with js , what is indexof()? and how would I work it into the xisting code?

edit : would a string be like this:

Code: Select all

unwanted = new String("~!@#$%^&*()_+|-=\[];,./{}:<>?");
Last edited by WizyWyg on Fri Feb 03, 2006 7:51 pm, edited 1 time in total.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

google is your friend:

http://www.google.com/search?q=javascript+indexOf(

but here is a sample:

untested....

Code: Select all

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

<html> 
<head> 
<title>Untitled</title> 
<script> 
var str = "&$@#!";
function checkIt()
{
	if(str.indexOf(document.MyForm.somefield.value) != -1)
		alert("bad");
	else
		alert("good");
		
	return false;
}
</script> 
</head> 

<body> 
<form name="MyForm" onSubmit="return checkIt()"> 
<input type="text" name="somefield"><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 »

Burrito wrote:google is your friend:

http://www.google.com/search?q=javascript+indexOf()
actually, it wasn't that helpful; alot of it conflicted with each other.
but here is a sample:

Code: Select all

<script> 
var str = "&$@#!";
function checkIt()
{
	if(str.indexOf(document.MyForm.somefield.value) != -1)
		alert("bad");
	else
		alert("good");
		
	return false;
}
</script>
should the check also be included within the for loop so that it checks all fields?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

actually, not sure what I was thinking...indexOf() will only match an exact string.

really you will need a regex to match against a pattern.

something like this:

Code: Select all

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

<html> 
<head> 
<title>Untitled</title> 
<script> 
function checkIt()
{
	var pattern = /[#\$!&\*]/;
	if(pattern.test(document.MyForm.somefield.value))
		alert("bad");
	else
		alert("good");
	return false;
}
</script> 
</head> 

<body> 
<form name="MyForm" onSubmit="return checkIt()"> 
<input type="text" name="somefield"><br> 
 
<input type="button" onClick="checkIt()" value="go"> 
</form> 


</body> 
</html>
and yes, you will need to put that in your loop...
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

Burrito wrote:actually, not sure what I was thinking...indexOf() will only match an exact string.

really you will need a regex to match against a pattern.

something like this:

Code: Select all

function checkIt()
{
	var pattern = /[#\$!&\*]/;
	if(pattern.test(document.MyForm.somefield.value))
		alert("bad");
	else
		alert("good");
	return false;
}
</script>
and yes, you will need to put that in your loop...
while in the for loop, how can it check and display at the same time as the other "you didn't fill these fields" message?
As it is now, it would open up its own "dialog" warning box, wouldn't it?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

I'm gonna leave that one as a challenge for you to figure out.

If you try and still have probs, let me know 8)
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

Burrito wrote:I'm gonna leave that one as a challenge for you to figure out.

If you try and still have probs, let me know 8)
Im still having problems. I've never had to do this type of form functions before.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

show me what you have so far.
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

Code: Select all

var reqfields = Array("Email::Email", "Firstname::First Name", "Lastname::Last Name", "month::Birthdate Month", "day::Birthdate Day", "year::Birthdate Year", "Address::Address", "City::City", "State::State", "Zip::Zip");
//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 are listed below \n\n";
	var mssg = "Only letters and numbers are allowed for these fields \n\n";
	var str = "~!$%^&*_+|=\[];/{}:<>?";
	for (var i = 0; i<reqfields.length; i++) {
		thStuff = reqfields[i].split("::");
		thText = thStuff[1];
		thName = thStuff[0];
		theField = document.g_form[thName];
		if (theField.value == "") {
			msg += "*** "+thText+" \n";
		}
		if (str.test(document.g_form[thName].value)) {
			alert("bad");
		} else {
			alert("good");
		}
		return false;
	}
	if (msg.length>90) {
		alert(msg);
		return false;
	}
	return true;
}
doesn't work.
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

Code: Select all

var reqfields = Array("Email::Email", "Firstname::First Name", "Lastname::Last Name", "month::Birthdate Month", "day::Birthdate Day", "year::Birthdate Year", "Address::Address", "City::City", "State::State", "Zip::Zip");
function checkIt() {
	var msg = "You are missing required information.  The information you're missing are listed below \n\n";
	var mssg = "Only letters and numbers are allowed for these fields \n\n";
	var str = "~!$%^&*_+|=\[];/{}:<>?";
	for (var i = 0; i<reqfields.length; i++) {
		thStuff = reqfields[i].split("::");
		thText = thStuff[1];
		thName = thStuff[0];
		theField = document.g_form[thName];
		if (theField.value == "") {
			msg += "*** "+thText+" \n";
			/*if (str.test(document.g_form[thName].value)) {
			alert("bad");
			} else {
			alert("good");
			}
			return false;
			}*/
			if (str.test(document.g_form[thName].value)) {
				alert("bad");
			} else {
				alert("good");
			}
			return false;
		}
	}
	if (msg.length>90) {
		alert(msg);
		return false;
	}
	return true;
}
doesn't work
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

Code: Select all

var reqfields = Array("Email::Email", "Firstname::First Name", "Lastname::Last Name", "month::Birthdate Month", "day::Birthdate Day", "year::Birthdate Year", "Address::Address", "City::City", "State::State", "Zip::Zip");
function checkIt() {
	var msg = "You are missing required information.  The information you're missing are listed below \n\n";
	var mssg = "Only letters and numbers are allowed for these fields \n\n";
	var str = "~!$%^&*_+|=\[];/{}:<>?";
	for (var i = 0; i<reqfields.length; i++) {
		thStuff = reqfields[i].split("::");
		thText = thStuff[1];
		thName = thStuff[0];
		theField = document.g_form[thName];
		if (theField.value == "") {
			msg += "*** "+thText+" \n";
			/*if (str.test(document.g_form[thName].value)) {
			alert("bad");
			} else {
			alert("good");
			}
			return false;
			}*/
		}
		if (str.test(document.g_form[thName].value)) {
			alert("bad");
		} else {
			alert("good");
		}
		return false;
	}
	if (msg.length>90) {
		alert(msg);
		return false;
	}
	return true;
}
doesn't work
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

Code: Select all

var reqfields = Array("Email::Email", "Firstname::First Name", "Lastname::Last Name", "month::Birthdate Month", "day::Birthdate Day", "year::Birthdate Year", "Address::Address", "City::City", "State::State", "Zip::Zip");
function checkIt() {
	var msg = "You are missing required information.  The information you're missing are listed below \n\n";
	var mssg = "Only letters and numbers are allowed for these fields \n\n";
	var str = "~!$%^&*_+|=\[];/{}:<>?";
	for (var i = 0; i<reqfields.length; i++) {
		thStuff = reqfields[i].split("::");
		thText = thStuff[1];
		thName = thStuff[0];
		theField = document.g_form[thName];
		if (theField.value == "") {
			msg += "*** "+thText+" \n";
			/*if (str.test(document.g_form[thName].value)) {
			alert("bad");
			} else {
			alert("good");
			}
			return false;
			}*/
		}
		if (msg.length>90) {
			alert(msg);
			return false;
		}
		if (str.test(document.g_form[thName].value)) {
			alert("bad");
		} else {
			alert("good");
		}
		return false;
	}
	return true;
}
doesn't work
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

ok 'E' for effort :P

try this:

untested....

Code: Select all

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

<html>
<head>
	<title>Untitled</title>
<script>
var reqfields = Array("Email::Email", "Firstname::First Name"); 
function checkIt() 
{ 
	var msg = "The Following Information Needs Attention, Please Fix And Resubmit \n\n"; 
	var mssg = "Only letters and numbers are allowed for these fields \n\n"; 
	var str = /^[\w+\d+]/; 
	for (var i=0; i<reqfields.length; i++) 
	{ 
		thStuff = reqfields[i].split("::"); 
		thText = thStuff[1]; 
		thName = thStuff[0]; 
		theField = document.g_form[thName]; 
		if (theField.value == "") 
	   
		msg += thText+" Is REQUIRED \n"; 
		else if(thName == "Firstname")
		{
		if(!str.test(document.g_form[thName].value))
			msg += thText+" Can Only Have Letters Or Numbers";
		}
	} 
	if (msg.length>90) 
	{ 
		alert(msg); 
		return false; 
	} 
	return true; 
}
</script>
</head>

<body>
<form name="g_form">
<input type="text" name="Email"><br>
<input type="text" name="Firstname"><br>
<input type="button" onClick="checkIt()" value="go">

</form>


</body>
</html>
WizyWyg
Forum Commoner
Posts: 92
Joined: Tue Aug 06, 2002 7:20 pm

Post by WizyWyg »

No matter how i chop up that code and insert it into the loop. it defeats/negs out the make sure the forms are filled out function.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

you shouldn't need to chop up the code I just gave you, just add the rest of your fields to it.

I'll test it in a sec....
Post Reply