Javascript Form Validation Help

ATLien · 03-13-2006, 09:10 AM

I wanted to know if someone could maybe help me out with some javascript. I have some custom javascript code that was written for me a while back. I wanted to know if someone could make the code form specific.

Code:

i.e. <form method="POST" action="http://www.atliengeorgia.com/..." name="contact" onsubmit="return validateForm("contact");">

I am using this on one page that has 2 forms and when I submit one, it tries to validate both forms. I want it so that the submission of one will only validate the form being submitted.

Thanks alot for the help.

Code:

function validateForm() {
	return (LJ_checkRequriedFields() && checkEqualGroups())
}

function LJ_checkRequriedFields() {
	var all_filled = true, reqFs = document.getElementsByTagName("INPUT");
	var reqTAs = document.getElementsByTagName("TEXTAREA");
	var err_string = "Please complete all required and invalid fields\n\nThe following fields are invalid or have been left empty:\n\n";
	var first = -1;
	if (reqFs != undefined && reqFs.length > 0) {
		for (var i = 0, j = reqFs.length; i < j; i++) {
			if (reqFs[i].required || reqFs[i].getAttribute('required') != null) {
				if ((reqFs[i].value.length <= 0) || ((reqFs[i].value.split(" ").length-1) == reqFs[i].value.length)) {
					reqFs[i].style.border = "double red 3px;";
					err_string += reqFs[i].name+"\n";
					all_filled = false;
					if (first < 0) first = i;
				}
				else if (reqFs[i].getAttribute('valid') == "email" && !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(reqFs[i].value))) {
					reqFs[i].style.border = "double red 3px;";
					err_string += reqFs[i].name+"\n";
					all_filled = false;
					if (first < 0) first = i;
				}
				else reqFs[i].style.border = "solid #7F9DB9 1px";
			}
		}
	}
		if (reqTAs != undefined && reqTAs.length > 0) {
		for (var i = 0, j = reqTAs.length; i < j; i++) {
			if (reqTAs[i].required || reqTAs[i].getAttribute('required') != null) {
				if ((reqTAs[i].value.length <= 0) || ((reqTAs[i].value.split(" ").length-1) == reqTAs[i].value.length)) {
					reqTAs[i].style.border = "double red 3px;";
				err_string += reqTAs[i].name+"\n";
					all_filled = false;
					if (first < 0) first = i;
				}
				else reqTAs[i].style.border = "solid #7F9DB9 1px";
			}
		}
	}
	if (all_filled) return true;
	reqFs[first].focus();
	alert(err_string);
	return false;
}

function isEmailAddres(str) {
	return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(str))
}

Radnor · 03-13-2006, 09:48 AM

Just looking at it quickly, can you pass it a form name so it will either validate the SMS or contact form?

Now, if you did this..... and the "onSubmit" fires, will it do the function for BOTH forms????

Radnor · 03-13-2006, 09:52 AM

Looking for the code "checkEqualGroups"????

Radnor · 03-13-2006, 09:57 AM

Also, the forms... you commented out the validation, are the forms working NOW? I see a ">" in the screen, and in the view source the form line is RED.

Radnor · 03-13-2006, 11:51 AM

On your 2 submit buttons, try the onClick event.

I have this working. If you want to use it, I'm sure you can make the changes needed. The onClick passes the form name to check data. So in YOUR case, the error message will not be 100% correct.

The other option here would be 2 functions. One to check each form. With this you would have the correct error message to display.

Code:

<html>
<head>
<title>forms</title>

<script type="text/javascript">

function dataok(formName) {
	var strFields = "";
	var strData;


	strData = document.forms[formName].name.value;

	if (strData.length == 0) {
		strFields += " NAME";
	}
	strData = document.forms[formName].email.value;
	if (strData.length == 0) {
		strFields += " EMAIL";
	}
	strData = document.forms[formName].message.value;
	if (strData.length == 0) {
		strFields += " MESSAGE";
	}
	if (strFields.length > 0) {
		alert("The following field(s) were blank" + strFields);
	}

}


</script>

</head>
<body>
<form name="contact">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
message: <input type="text" name="message"><br>

<input type="submit" name="submit" value="Contact Me!" onClick="return dataok('contact')">
<input type="reset" name="reset" value="Reset" onclick="return confirm('Are you sure you want to clear all fields of the form?');">

</form>

<p></p>
<form name="sms">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
message: <input type="text" name="message"><br>

<input type="submit" name="submit" value="Contact Me!" onClick="return dataok('sms')">
<input type="reset" name="reset" value="Reset" onclick="return confirm('Are you sure you want to clear all fields of the form?');">

</form>
</body>
</html>

Radnor · 03-13-2006, 12:13 PM

I think your code is looking for ALL input fields without considering which form it is from.

Code:

reqFs = document.getElementsByTagName("INPUT");

need a way to tell it which form to read and ignore the other.

Try this.... Reads the form name and adjust the message. (DID NOT TEST IT)

Code:

function dataok(formName) {
	var strFields = "";
	var strData;


	strData = document.forms[formName].name.value;

	if (strData.length == 0) {
		strFields += " NAME";
	}
	strData = document.forms[formName].email.value;
	if (strData.length == 0) {
		if (formName == 'contact" {
			strFields += " EMAIL";
		} else {
			strFields += " CALL BACK NUMBER";
		}
	}
	strData = document.forms[formName].message.value;
	if (strData.length == 0) {
		strFields += " MESSAGE";
	}
	if (strFields.length > 0) {
		alert("The following field(s) were blank" + strFields);
	}

}

ATLien · 03-13-2006, 12:17 PM

Umm, ok, thanks for the help, but I am completely lost with what you are saying.

All I want to do is be able to make it so when I submit, it only checks that form. Isn't there a way to simply say only check contact feilds?

Radnor · 03-13-2006, 01:16 PM

How about this..... Copy this code save it as test.htm and see if it works for you. I've been messing with it some. Did not want to get into it at this level but.....

Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Contact Me - Chris Lentz (ATLienGeorgia.com)</TITLE>
<META name="description" content="This site is the official web site of Chris Lentz AKA ATLien from Atlanta, Georgia. On this site you will find a blog, pictures, profile, family info, and contact info. Check the site out, it has alot of information.">
<META name="keywords" content="">
<link rel="stylesheet" type="text/css" href="http://www.atliengeorgia.com/includes/style.css">
<script src="http://www.atliengeorgia.com/includes/formjava.js"></script>

<script>
function dataok(formName) {
	var strFields = "";
	var strData;


	strData = document.forms[formName].name.value;

	if (strData.length == 0) {
		strFields += " NAME";
	}
	strData = document.forms[formName].email.value;
	if (strData.length == 0) {
		if (formName == 'contact" {
			strFields += " EMAIL";
		} else {
			strFields += " CALL BACK NUMBER";
		}
	}
	strData = document.forms[formName].message.value;
	if (strData.length == 0) {
		strFields += " MESSAGE";
	}
	if (strFields.length > 0) {
		alert("The following field(s) were blank" + strFields);
	}

}
</script>

</HEAD>
<BODY>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
	<td width="100%" height="16" background="http://www.atliengeorgia.com/images/shadowtop.gif"></td>

</tr>
<tr>
	<td width="100%" height="50" bgcolor="#EDEDD5" class="header">
		<table cellpadding="0" cellspacing="0">
		<tr>
			<td><a href="http://www.ATLienGeorgia.com/"><img src="http://www.atliengeorgia.com/images/logo.gif" alt="This site is the official web site of Chris Lentz AKA ATLien from Atlanta, Georgia. On this site you will find a blog, pictures, profile, family info, and contact info. Check the site out, it has alot of information." height="50" width="309" border="0"></a></td>
			<td class="nav1"><a href="/" class="nav1">Home</a></td>
			<td width="10"></td>
			<td class="nav1"><a href="about.php" class="nav1">About Me</a></td>

			<td width="10"></td>
			<td class="nav1"><a href="pictures.php" class="nav1">Pictures</a></td>
			<td width="10"></td>
			<td class="nav1"><a href="family.php" class="nav1">My Family</a></td>
			<td width="10"></td>
			<td class="nav2"><a href="contact.php" class="nav2">Contact</a></td>
		</tr>

		</table>
	<td>
</tr>
<tr>
	<td width="100%" height="5" bgcolor="#8B9949"><td>
</tr>
<tr>
	<td width="100%" height="5" bgcolor="#EDEDD5"><td>
</tr>
<tr>
	<td width="100%" height="15" bgcolor="#DD942D"><td>
</tr>

<tr>
	<td width="100%" height="40" bgcolor="#EDEDD5">
		<table cellpadding=0 cellspacing=10 width="800">
		<tr>
			<td width="50%"><div align="center">Resume: <a href="">HTML</a> / <a href="">PDF</a> / <a href="">DOC</a> (Coming Soon!)</div></td>

			<td width="50%"><div align="center"><input type="button" value="Join My Address Book" onClick="window.open('address.php?do=add', 'Address',  'width=500,height=300,toolbar=0,scrollbars=1,')"></div></td>
		</tr>
		</table>
	<td>
</tr>
<tr>
	<td width="100%" height="5" bgcolor="#C2B982"><td>
</tr>
<tr>
	<td class="content" width="800" valign="top"><table cellpadding=5 cellspacing=10 width="800">
<tr>

	<td colspan="2">
		<div align="center">
		<form method="POST" action="http://www.atliengeorgia.com/contact.php?do=send" name="contact">
		<table cellpadding=5 cellspacing=2 align="center" class="box3" width="600">
		<tr>
			<th class="box3" colspan="2">Contact Me:</th>
		</tr>
		<tr>
			<td colspan=2><div align="center">Please use this form to contact me for any reason. Please allow 24 to 48 hours for a reply.<p></div></td>

		</tr>
		<tr>
			<td><div align="right">Name:</div></td>
			<td><div align="left"><input type="text" name="name" required="true" size="30"></div></td>
		</tr>
		<tr>
			<td><div align="right">Email Address:</div></td>
			<td><div align="left"><input type="text" name="email" size="30" required="true" valid="email"></div></td>

		</tr>
		<tr>
			<td colspan=2><div align="center">Message:<br><textarea name="message" rows="5" cols="37" required="true"></textarea><p></div></td>
		</tr>
		<tr>
			<td colspan=2><div align="center">
				<input type="submit" class="button" name="submit" value="Contact Me!" onClick="return dataok('contact');">
				<input type="reset" class="button" name="reset" value="Reset" onclick="return confirm('Are you sure you want to clear all fields of the form?');"><br>

				</div>
			</td>
		</tr>
		</form>
		</table>
	</td>
</tr>
<tr>
	<td>
		<a href="" name="sms"></a>

		<form method="POST" action="http://www.atliengeorgia.com/contact.php?do=sendsms" name="contactsms" >
		<table cellpadding=5 cellspacing=2 align="center" class="box2" width="350">
		<tr>
			<th class="box2" colspan="2">Send a Text Message To Me:</th>
		</tr>
		<tr>
			<td colspan=2><div align="center">This form can be used to text message (SMS) my cell phone. <p></div></td>
		</tr>

		<tr>
			<td><div align="right">Name: (10 Characters Only)</div></td>
			<td><div align="left"><input type="text" name="name" size="15" maxlength="10" required="true"></div></td>
		</tr>
		<tr>
			<td><div align="right">Call/Text Back Number:</div></td>
			<td><div align="left"><input type="text" name="callback" size="15" maxlength="10" required="true"></div></td>
		</tr>

		<tr>
			<td colspan=2>
				<div align="center">Message: (Please limit message to 150 or less characters.)<br>
				<textarea name="message" rows="3" cols="20" required="true"></textarea><p></div>
			</td>
		</tr>
		<tr>
			<td colspan=2><div align="center">

				<input type="submit" class="button" name="submit" value="Text Message Me!" onClick="return dataok('contactsms');">
				<input type="reset" class="button" name="reset" value="Reset" onclick="return confirm('Are you sure you want to clear all fields of the form?');"><br>
				</div>
			</td>
		</tr>
		</form>
		</table>
	</td>
	<td>

		<table cellpadding="0" cellspacing="2" width="350">
		<tr>
			<th class="box1">Other Ways To Contact Me:</th>
		</tr>
		<tr>
			<td>
				<table cellpadding="0" cellspacing="2" class="box1" width="100%">
				<tr>

					<td><div align="center"><img src="/images/contact.gif" height="128" width="293" alt=""></div></td>
				</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td><div class="small" align="center">(the above is a image for security reasons)</div></td>
		</tr>

		</table>
		</div>
	</td>
</tr>
</table>
	<td>
</tr>
<tr>
	<td width="100%" height="16" background="http://www.atliengeorgia.com/images/shadowbottom.gif"></td>
</tr>
<tr>
	<td class="copy">Page Loaded In: 0.0127 seconds &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Total Number of Visitors: 13107</td>

</tr>

<tr>
	<td class="copy">Last Update: 03/13/06 10:11</td>
</tr>
<tr>
	<td class="copy">Copyright &copy; 2005 Chris Lentz. All Rights Reserved.</td>
</tr>
<tr>
	<td class="copy"><a href="http://www.8thandoceanforums.com" target="_blank" class="copy">8th & Ocean Forums</a></td>

</tr>
</table>
<br />

<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1300021;
var sc_invisible=1;
var sc_partition=11;
var sc_security="4d48b848";
var sc_remove_link=1;
</script>

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><img  src="http://c12.statcounter.com/counter.php?sc_project=1300021&java=0&security=4d48b848&invisible=1" alt="web counter" border="0"> </noscript>
<!-- End of StatCounter Code -->
</BODY>
</HTML>

ATLien · 03-13-2006, 01:22 PM

Well the main issue with that code is that it is specific about the feild names. I use this form validation on a bunch of forms, just these 2, so it need to be able to work with multiple forms.

Radnor · 03-13-2006, 01:36 PM

Well, did you follow the post from WebG.???? Use onBlur to test the field. Wish I'd knew about this earlier.