Question

I am planning on showing/hiding divs to validate a form.
But the divs only show a split second, and then the form gets submitted…

Any ideas why?

here is the code:

function validateForm() {
var name = nameEmpty(document.getElementById("annonsera_name"));
if (nameEmpty(name)){return false;}
return false;
     }
function nameEmpty(fld){
    if (fld.value==0) {
        document.getElementById("annonsera_nameempty_error").style.display='block'; 
        document.getElementById("annonsera_namenotvalid_error").style.display='none';
        document.getElementById("annonsera_name").focus();
        return false;
    }
    else if (fld.value.match(alphaExp)) {
        document.getElementById("annonsera_namenotvalid_error").style.display='block';  
        document.getElementById("annonsera_name").focus();
        document.getElementById("annonsera_nameempty_error").style.display='none';  
        return false;
    }

         document.getElementById("annonsera_nameempty_error").style.display='none'; 
        document.getElementById("annonsera_namenotvalid_error").style.display='none';
    return false;

            }

and here is the form:

<form name="annonsera" id="annonsera" method="post" enctype="multipart/form-data" onSubmit="return validateForm();">

Answer 1

It’s probably generating an error and therefore never returning anything. Assuming you are using Firefox, have you checked the javascript console?

I see what looks like a problem here, where you call nameEmpty() twice – once with a field, and the other time with a (presumably?) boolean value:

var name = nameEmpty(document.getElementById("annonsera_name")); // Returns boolean
if (nameEmpty(name)){return false;} // Tries to pass boolean back into nameEmpty?