Form Validation onSubmit with PHP action

JavaScript
1

I am trying to write a javascript function to validate 3 input fields on my form. The action is to a PHP file, which will INSERT to the db. First, I need to verify that the item number (Eitem) is not blank, to prevent empty records from inserting. Next I have to arrays of checkboxes (playval and ageval which need to have at least one box checked.

FIRST QUESTION: Even when I test it with only the item number validation, I get the alert, but the form posts anyway.
<form action=“update.php” name=“form1” onSubmit=return checkForm(this)">

This is the simple version (with only item number):
<script language =“JavaScript” type=“text/javascript”>
function checkForm(oForm)
{
if (oForm.Eitem.value==“”){
alert (“Cannot proceed without Item Number!”);
oForm.Eitem.focus();
return false;
}

}
</script>

The functions for validating the checkboxes:

function grpMinimum(grp, min, msg)
{
if (typeof grp[0] == ‘undefined’) return true;
var el, i = 0, msg = 'Please choose at least ’ + min + msg;
while (el = grp[i++])
if (el.checked)
if (–min == 0) return true;
alert(msg);
grp[0].focus();
return false;
}

function checkBoxes(oForm)
{
if (!grpMinimum(oForm.elements[‘design_random_selection’], 2, ’ design selections.')) return false;
// additional validation
return true; //all OK
}
So, two questions/issues:

  1. how to keep the form from submitting
  2. how to combine these functions so they are called as one, or put them all into the onSubmit.

I know it’s a lot, but have been searching everywhere to no avail, and cannot see the code in most posts (?)

Thanks in advance,
maddlake

2
  1. onsubmit is an event handler for the form tag not the submit button. Returning false will cancel the submit. If you include the event handler in the html tag, it should be of this form:

onsubmit=“return validate();”

However, as shown in the code below, there is no reason to mix javascript code amongst the html tags.

  1. To execute two functions, call a single function that executes both the functions.

Here is an example:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">

<head>

<script language="javascript">
<!-- Hide from browsers lacking javascript

window.onload = initialize;

//You have to wait until the page loads before you can
//refer to elements:
function initialize()
{	
	//assign functions to event handlers(note:
	//onsubmit is an event handler for the
	//<form> tag not the submit button):
	document.f.onsubmit=validate;
}

function validate()
{
	//Execute two functions:
	f1();
	f2();

	return false;
}

function f1()
{
	alert("inside f1");
}

function f2()
{
	alert("inside f2");
}

// End hiding -->
</script>

</head>

<div>hello</div>
<body>
<form name="f" method="post" action="dummy.htm">
<input type="submit" name="b1" value="submit" />
</form>

</body>
</html>
3 
[COLOR=DarkSlateBlue]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

String.prototype.trim = function()
{
	return this.replace(/^\\s*|\\s*$/g, '');
}

function isEmpty(field)
{
	var re = /^\\s*$/;
	return re.test(field.value);
}

function grpIt(obj)
{
	return (typeof obj[0] != 'undefined') ? obj : [obj];
}

function fewerChkd(min, grp)
{
	var checked = 0, i = grp.length;
	do
		if (grp[--i].checked)
			if (++checked >= min)
				return false;
	while (i);
	return true;
}

function checkform(e)
{
	var grp, focus_el = null, msg = '';
	e.Eitem.value = e.Eitem.value.trim();
	if (isEmpty(e.Eitem))
	{
		msg += "• Please fill in that 'item' thing.\
";
		focus_el = focus_el || e.Eitem;
	}
	grp = grpIt(e['playval[]']);
	if (fewerChkd(1, grp))
	{
		msg += "• Please choose at least 1 play value.\
";
		focus_el = focus_el || grp[0];
	}
	grp = grpIt(e['ageval[]']);
	if (fewerChkd(1, grp))
	{
		msg += "• Please choose at least 1 age value.\
";
		focus_el = focus_el || grp[0];
	}
	if (msg != '')
	{
		var prefix = "\
To assist us in processing your form:\
\
";
		var suffix = "\
Kindly correct and resubmit. Thank you.\
\
";
		alert(prefix + msg + suffix);
		if (focus_el.focus)
		{
			focus_el.focus();
			focus_el.select();
		}
		return false;
	}
	return true;
}

</script>
</head>
<body>
<form action="update.php" name="form1" onSubmit="return checkform(this.elements)">
<input type="text" name="Eitem" value="" /> item<br />
<h4>Check at least one play value:</h4>
<input type="checkbox" name="playval[]" value="1" />1<br />
<input type="checkbox" name="playval[]" value="2" />2<br />
<input type="checkbox" name="playval[]" value="3" />3<br />
<h4>Check at least one age value:</h4>
<input type="checkbox" name="ageval[]" value="1" />1<br />
<input type="checkbox" name="ageval[]" value="2" />2<br />
<input type="checkbox" name="ageval[]" value="3" />3<br /><br />
<input type="submit" />
</form>
</body>
</html>
[/COLOR]