My recent post had some things to fix. I think this should be well structured and written for you.
How does this code look to you? If something needs to be changed please tell me.
// Gets all elements by ID's
function elem(id) {
return document.getElementById(id);
};
//
//Check box id"RadioGroup1_0" will be checked on start up of page (Phone)
window.onload = function () {
document.querySelector("#RadioGroup1_0").click();
//
//Gets my Form name (form) and on submission (submit) checks the rules below...
/* first name must be greater than 0
last name must be greater than 0
email must be greater than zero and follow the email reg ex
phone must be greater than 7 but shorter than 11
*/
var form = document.getElementById('form');
form.onsubmit = function (e) {
var rules = [
['first-name', elem('first-name').value.length > 0],
['last-name', elem('last-name').value.length > 0],
['email', elem('email').value.length > 0 && /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-z0-9]{2,4})+$/.test(elem('email').value)],
['phone', elem('phone').value.length > 7 && elem('phone').value.length < 11 ]
];
//This is the (reqMsg) error, it follows the ID's listed above above and if there is an error it must be "inline" and if there is no error it will be "none",
var valid = true;
var firstFocus = null;
for (var i = 0; i < rules.length; i++) {
var parent = elem(rules[i][0]).parentNode;
if (!rules[i][1]) {
valid = false;
parent.children[2].style.display = "inline";
if (firstFocus == null) firstFocus = parent.children[1];
} else {
parent.children[2].style.display = "none";
}
}
if (!valid) {
firstFocus.focus();
return false;
}
return true;
};
};
// Using only alphabet keys NO Numeric for certain field boxes...
// First Name and Last Name
function onlyAlphabets(e) {
try {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if ((charCode == 64) ||
(charCode == 32) ||
(charCode >= 65 && charCode <=90) ||
(charCode >= 97 && charCode <=122))
return true;
else return false;
} catch (err) {
alert(err.Description);
}
}
/* isNumeric
*/
// This is for the phone field, only allowing NUMERIC numbers so no alphabets. It's referencing my above JS minimum 8 and maximum 10.
var specialKeys = new Array();
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode === 8));
return ret;
}