required form fields

[jonnyroboto]

Ok.  I have a form which needs required fields.  I'm using a code that I found on lynda.com for making fields required.  I made the necessary changes to my .htm file and linked the .js file up accordingly; however, it's letting the form go through without entering any info into the required fields.  I have the form and javascript codes listed below:

 

<form action="orfp1.php" method="post">
<table width="689" border="0" cellspacing="0" cellpadding="6">
    	<tr>
        	<th scope="col">
            	<div align="left">
            		<label for="fullName">Full Name:
                		<input type="text" name="fullName" id="fullName" class="reqd" />
                	</label>
                </div>
            </th>
            <th scope="col">
            	<div align="left">
                	<label for="email">Email:
                		<input type="text" name="email" id="email" class="reqd" />
                	</label>
                </div>
            </th>
        </tr>
        <tr>
            <td>
                <div align="left">
                	<label for="dayPhone"><strong>Day Phone:
                		<input type="text" name="dayPhone" id="dayPhone" class="reqd" />
                	<br /></strong>with area code
                    <strong><br /></strong>
                    </label>
                </div>
            </td>
            <td>
                <div align="left">
            		<label><strong>Evening Phone:</strong>
                		<input type="text" name="evePhone" id="evePhone" />
                	</label>
                	<br />with area code
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
            	<input type="reset" name="clear" id="clear" value="Reset Form" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"> 
                <input type="submit" name="submit" id="submit" value="Submit Form" />
            </td>
        </tr>
    </table>
</form>

 

window.onload = initForms;

function initForms() {
for (var i=0; i< document.forms.length; i++) {
	document.forms[i].onSubmit = function() {
		return validForm();
	}
}
}

function validForm() {
var allGood = true;
var allTags = document.getElementByTagName("*");

for (var i=0; i<allTags.length; i++) {
	if (!validTag(allTags[i])) {
		allGood = false;
	}
}
return allGood;

function validTag(thisTag) {
	var outClass = "";
	var allClasses = thisTag.className.split(" ");

	for (var j=0; j<allClasses.length; j++) {
		outClass += validBasedOnClass(allClasses[j]) + " ";
	}

	thisTag.className = outClass;

	if (outClass.indexOf("invalid") > -1) {
		thisTag.focus();
		if (thisTag.nodeName == "INPUT") {
			thisTag.select();
		}
		return false;
	}
	return true;

	function validBasedOnClass(thisClass) {
		var classBack = "";

		switch(thisClass) {
			case "":
			case "invalid":
				break;
			case "reqd":
				if (allGood && thisTag.value == "") {
					classBack = "invalid ";
				}
				classBack += thisClass;
				break;
			default:
				classBack += thisClass;
		}
		return classBack;
	}
}

}

 

Each one of my required fields has a class of "reqd".  I also know that the .js file is being called because I added an alert on submit that gave me a message, which worked. 

 

Can someone tell me why the script isn't working?

 

Thank you,

[KevinM1]

That's some inefficient code for marking fields as required.  I'm not even sure how it would work, as it doesn't check to see if the inputs have a value within them....  :-\

 

The biggest thing that jumps out at me is the second line in the validForm() function.  It should be:

 

var allTags = document.getElementsByTagName("*");

 

That is, getElementsByTagName("*").  You're also missing an ending curly brace for all of your functions.  In JavaScript, functions look like:

 

function functionName([argument 1, argument 2, ...]) {
   // function body
}

 

Try it like that and see if it works.

[jonnyroboto]

I rechecked the code.  I know, it is VERY inefficient code considering the methods available.  I'm novice, very novice, ha ha.  I checked the code for the closing braces on all the functions and they were there.  Maybe they didn't post for some odd reason.  The kicker was that getElementsByTagName.  That "s" sent everything into no-buenoVille. 

 

Thank you for your help, it works just fine now.  From now on, I'll get up on the new stuff so I'm not posting this ancient stuff on here, ha ha ha!

 

Cheers!