function getElementsByClass(searchClass, node, tag)
{
var classElements = new Array();
if ( node == null ) node = document;
if ( tag == null ) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++)
{
if ( pattern.test(els[i].className) )
{
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function check( formName )
{
var req = getElementsByClass('required', formName.form);
var err = new Array();
for( var i=0; i < req.length; i++)
{
var value = document.getElementById(req[i].htmlFor).value;
if( value == null || value == '' )
{
err.push(req[i].htmlFor);
}
}
if( err.length > 0 )
{
var txt = 'Please fill in the following fields:' + "\n-" + err.join("\n-");
alert( txt );
return false;
}
else
{
formName.form.submit();
return true;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Sample Form</title> </head> <body> <form method="post" id="formID" action="#"> <fieldset> <legend>Sample Form</legend> <label for="Username" class="required">Username:</label> <input type="text" id="Username" name="Username" /> <label for="Comments">Comments</label> <textarea name="Comments" id="Comments" rows="10" cols="40"></textarea> <input type="button" value="Submit" onclick="javascript:check(this);" /> <input type="reset" value="Reset" /> </fieldset> </form> </body> </html>
Refactorings
No refactoring yet !
Andre Steenveld
October 3, 2007, October 03, 2007 00:35, permalink
No rating.
Login to rate!
What is your question exactly? It looks like you got most of the parts and only have to add the classnames to the elements and fix some minor bugs.
Squeegie
October 3, 2007, October 03, 2007 09:15, permalink
No rating.
Login to rate!
if you want that button to validate, it should be return check(this), not javascript:check.
The return means the button will only work on check returning true. The javascript: notation is not for onclick.
Sean Catchpole
October 3, 2007, October 03, 2007 16:40, permalink
No rating.
Login to rate!
While I'm sure there are other ways, this is how I would do it. Also, I don't personally recommend using alert, but instead some for of highlighting using classes and CSS.
function check( formName ) {
var err = [];
var labels = document.getElementById(formName).getElementsByTagName('label');
for(var i=labels.length; i-->0;) {
if((' '+labels[i].className+' ').indexOf(' required ')<0) continue;
if(!document.getElementById(labels[i].htmlFor).value)
err.push(labels[i].htmlFor);
}
if(err.length) {
alert("Please fill in the following fields:\n-" + err.join("\n-"));
return false;
} return true;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sample Form</title>
</head>
<body>
<form method="post" id="formID" action="#">
<fieldset>
<legend>Sample Form</legend>
<label for="Username" class="required">Username:</label>
<input type="text" id="Username" name="Username" />
<label for="Comments">Comments</label>
<textarea name="Comments" id="Comments" rows="10" cols="40"></textarea>
<input type="button" value="Submit" onclick="return check('formID');" />
<input type="reset" value="Reset" />
</fieldset>
</form>
</body>
</html>
travis
October 4, 2007, October 04, 2007 07:06, permalink
No rating.
Login to rate!
You could really reduce your code with jQuery. (http://jquery.com/)
$(function() {
$("#formID").bind("submit", function() {
var err = [];
$("label.required").each(function(i) {
err[err.length] = this.htmlFor;
});
if (err.length > 0) {
alert("Please fill in the following fields:\n-" + err.join("\n-"));
}
return (err.length <= 0);
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Sample Form</title> <script type="text/javascript" src="jquery.js" /> </head> <body> <form method="post" id="formID" action="#"> <fieldset> <legend>Sample Form</legend> <label for="Username" class="required">Username:</label> <input type="text" id="Username" name="Username" /> <label for="Comments">Comments</label> <textarea name="Comments" id="Comments" rows="10" cols="40"></textarea> <input type="button" value="Submit" /> <input type="reset" value="Reset" /> </fieldset> </form> </body> </html>
travis
October 4, 2007, October 04, 2007 07:09, permalink
No rating.
Login to rate!
oops, the button should be type="submit"
Ali Karbassi
October 4, 2007, October 04, 2007 08:27, permalink
No rating.
Login to rate!
Travis: I love jQuery and all, but why should I include a 14kb file just to do this? It's a waste of load time for the user.
Spencer Sutton
October 7, 2007, October 07, 2007 23:22, permalink
No rating.
Login to rate!
A very simple solution for what you want to do. I can't think of an easier way to do it.
function check(formName) {
var labels = formName.form.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
var labelElem = labels[i];
if (labelElem.className.indexOf('required') !== -1) {
var input = document.getElementById(labelElem.htmlFor);
if (input.value === null || input.value === '') {
var err = err || "Please fill in the following fields:\n";
err += input.id + "\n";
}
}
}
if (err) {
alert(err);
return false;
}
return true;
}
Tj Holowaychuk
June 9, 2008, June 09, 2008 21:08, permalink
No rating.
Login to rate!
This will REALLY cut down your code :P
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
All this does is check to see if the form fields with the class of "required" have values selected / inputted.
The submit button should be: <input type="submit" value="submit" onclick="javascript:check();" />