why is this form still submitting after return false?

Question

Hi...

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?

Answer 2

Maybe a bit offtopic, but here goes...

You should really consider JQuery Validation, it's nice, clean and easy to implement. I've done it a few times, and never looked back since. It sure beats the manual validation method like the one you use :)

Check out the example, there really is not that much code to write, to get validation going.

In your example that would be (not tested):

<script>
  $(document).ready(function(){
    $("#annonsera").validate({
      rules: {
        annonsera_name: {
          required: true,
          minlength: 1
        }
      },
      messages: {
        annonsera_name: {
          required: "You need to write your name",
          minlength: jQuery.format("At least {0} characters required!")
        }
      }
    })
  });
</script>

There are also a lot of ways of customization through dhtml and css, check out the options.