<html>
<title>HTML/Javascript Form Field Required Tutorial - RJM Programming - December, 2013</title>
<style>

body {
color: brown;
background-color: yellow;
}

input.error {
border: 3px orange inset;
background-color: pink;
}

label.error {
font-weight: itallic;
color: purple;
}

#myform {
border: 3px solid green;
padding: 8px 8px 8px 8px;
}

</style>
<script type='text/javascript'>
window.onload = setupValidation;
//var myallokay = true;
//var ourtag;

function setupValidation() {
var i;
for (i=0; i<document.forms.length; i++) {
document.forms[i].onsubmit = function() { return analyzeForm(); }
}
}

function analyzeForm() {
var myallokay = true;
var myalltags = document.getElementsByTagName("*");
var i;
document.getElementById('mymore').innerHTML = "";
for (i=0; i<myalltags.length; i++) {
if (!validateTag(myalltags[i])) {
myallokay = false;
}
}

if (myallokay) {
document.getElementById('mymore').innerHTML = "That's great ... let's do some more ... programmer??!!";
}
return myallokay;

function validateTag(mytag) {
var myoutclass = "";
var myallclasses = mytag.className.split(" ");
var j;
var mymust = "";
if (mytag.id.toLowerCase().indexOf("email") != -1) mymust = "@";

for (j=0; j<myallclasses.length; j++) {
myoutclass = classChanges(myallclasses[j], mymust) + " ";
}

mytag.className = myoutclass;

if (myoutclass.indexOf("error") != -1) {
mytag.focus();
if (mytag.nodeName == "INPUT") {
mytag.select();
}
return false;
}
return true;

function classChanges(myclassfound, musthave) {
var myclassreturned = "";

switch (myclassfound) {
case "error":
if (mytag.value == "") {
myallokay = false;
mytag.focus();
if (mytag.nodeName == "INPUT") {
mytag.select();
}
}
case "":
if (musthave != "" && (mytag.value.indexOf(musthave) == -1 || mytag.value == "")) {
myallokay = false;
mytag.focus();
if (mytag.nodeName == "INPUT") {
mytag.select();
}
if (mytag.value != "") document.getElementById('mymore').innerHTML = "Field must contain " + musthave + " but you put " + mytag.value;
}
break;

case "needed":
if (myallokay && mytag.value == "") {
myclassreturned += "error";
} else if (myallokay && musthave != "" && mytag.value.indexOf(musthave) == -1) {
myclassreturned += "error";
document.getElementById('mymore').innerHTML = "Field must contain " + musthave;
}
break;

default:
myclassreturned += myclassfound;
break;
}
return myclassreturned;
}

}

}
</script>
<body>
<h2>Your Form (has some required field(s))</h2>
<form id='myform' action='#'>
<p><label for="yourname">Your name: <input type='text' id='yourname'></input></label></p>
<p><label for="youremail">Your email address *: <input type='text' id='youremail' class='needed'></input></label></p>
<p><label for="youraddr1">Your street address 1: <input type='text' id='youraddr1'></input></label></p>
<p><label for="youraddr2">Your street address 2: <input type='text' id='youraddr2'></input></label></p>
<p><label for="yoursuburb">Your suburb: <input type='text' id='yoursuburb'></input></label></p>
<p><label for="yourcity">Your city: <input type='text' id='yourcity'></input></label></p>
<p><label for="yourpostcode">Your postcode: <input type='text' id='yourpostcode'></input></label></p>
<input type="submit" value="Proceed"></input><input type="reset" value="Reset"></input>
</form>
<p id='mymore'></p>
</body>
</html>