Validating forms using javascript

Hi, im trying to validate a form using javascript.
If there are errors in the form javascript lists them in a div tag
on the top of the page. the problem is that whenever i click
the submit for the first time everything is working but after
i get the errors if im clicking submit again, it's submitting the form
regardless of the errors...

Attached is the code
Thanks

window.onload = initForm;

var valid = true;
var errorlog = new Array();

function initForm(){
document.forms[0].onsubmit = validateForm;
}

function validateForm(){
// validate first name
if (document.getElementById("firstname").value == ""){
errorlog[0] = true;
}
// validate last name
if (document.getElementById("lastname").value == ""){
errorlog[1] = true;
}
// validate phone number
if (document.getElementById("tel").value == "" ||
document.getElementById("tel").value.search(/^\d{10}$/) == -1 &&
document.getElementById("tel").value.search(/^\d{8}$/) ==-1 ){

errorlog[2] = true;
}

notValid();
return valid;
}

function changeId(){
document.getElementById("tobechanged").id = "errorlog";
}

function outputErrors(){
if (errorlog[0]){
document.getElementById("errorlog").innerHTML += "Please enter your first name." + "<br/>";
}
if (errorlog[1]){
document.getElementById("errorlog").innerHTML += "Please enter your last name." + "<br/>";
}
if (errorlog[2]){
document.getElementById("errorlog").innerHTML += "Please enter a valid phone number." + "<br/>";
}
}

function notValid(){
changeId();
outputErrors();
valid = false;
}

Hi, im trying to validate a form using javascript.
If there are errors in the form javascript lists them in a div tag
on the top of the page. the problem is that whenever i click
the submit for the first time everything is working but after
i get the errors if im clicking submit again, it's submitting the form
regardless of the errors...You have a global object named errorlog and then you change an element's ID to the same name, which is likely to cause a conflict.
Why do you feel the need to change the ID of a div?

In Internet Explorer, names and IDs are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID.

Validation of the kind if (document.getElementById("firstname").value == ""){ is barely worthy of the name, and virtually worthless, as even a single space or a ? will return false, i.e. pass the validation.

if (nForm['firstName'].value == "")
{
updateErrorLog(logMsgs[0],msgDisplay);
}
if (nForm['lastName'].value == "")
{
updateErrorLog(logMsgs[1],msgDisplay);
}


12 Pack Mack -

One more time - Validation of the kind if (document.getElementById("firstname").value == ""){ or if (nForm['firstName'].value == "") { is barely worthy of the name, and virtually worthless, as even a single space or a ? will return false, i.e. pass the validation.

Thanks for your posts guys but it's still not working
I changed the id name and i still get the same problem.
when i submit for the first time it's working
but when i hit submit again it's processing the form even if there are more errors.
I also added a few more lines of code.

Philip M - the form is not final and i will make the validation a bit more useful in the future
but for now i just want to solve this bug.

Thanks


window.onload = initForm;

var valid = true;
var errorlog = new Array();
var checked = false;

function initForm(){
document.forms[0].onclick = validateForm;
}

function validateForm(){
// validate first name
if (document.getElementById("firstname").value == ""){
errorlog[0] = true;
}
// validate last name
if (document.getElementById("lastname").value == ""){
errorlog[1] = true;
}


// validate phone number
if (document.getElementById("tel").value == "" ||
document.getElementById("tel").value.search(/^\d{10}$/) == -1 &&
document.getElementById("tel").value.search(/^\d{8}$/) ==-1 ){

errorlog[2] = true;
}
// validate email
if (document.getElementById("email").value == "" ||
document.getElementById("email").value.search(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) ==-1){
errorlog[3] = true;
}
// validate services
for (var i=0;i<7;i++){
if (document.getElementById("service" + i).checked){
checked = true;
}
}

if (!checked){
errorlog[4] = true;
}

// not valid will run only if there were errors in the array !!
var checker;
for (var j=0;j<5;j++){
if (errorlog[j]){
checker = true;
}
}
if (checker == true){
notValid();
} else {
valid = true;
}
return valid;
}

// function change id changes the id of the div tag that will display the errors
function changeId(){
document.getElementById("tobechanged").id = "errorlogbox";
}

// output errors prints all the errors that has been found into the newley defined errorlog div tag
function outputErrors(){
if (errorlog[0]){
document.getElementById("errorlogbox").innerHTML += "Please enter your first name." + "<br/>";
}
if (errorlog[1]){
document.getElementById("errorlogbox").innerHTML += "Please enter your last name." + "<br/>";
}
if (errorlog[2]){
document.getElementById("errorlogbox").innerHTML += "Please enter a valid phone number." + "<br/>";
}
if (errorlog[3]){
document.getElementById("errorlogbox").innerHTML += "Please enter a valid email address." + "<br/>";
}
if (errorlog[4]){
document.getElementById("errorlogbox").innerHTML += "Please select one service or product from the list below." + "<br/>";
}
}


function notValid(){
changeId();
outputErrors();
window.scroll(0,0);
valid = false;
}