JavaScript: Why won't my form submit?

Question

My problem is that my form, <form name="enrollment" method="post" action="submit.php"> will not submit. My submit button looks like: <input class="buttons" type="submit" name="submit" onclick="return validate()" value="Submit" /> .

It calls this JavaScript function:

// Returns true if there are no errors and false if there are errors
function validate() {
  // Something is not returning true here so that the form is not being submitted
  if ( !window.err_exist ) {
    // No errors
    return true;
  }
  // There are errors
  alert("Errors exist in the form!");
  return false;
}

The variable window.err_exist is defined in the function getReviewValues() . In getReviewValues() , I set window.err_exist = false; . Then, I validate the form with conditionals of the form:

// Name
var r_string = "Name: ";

if ( document.forms["enrollment"]["name"].value.trim() == "" ) {
    r_string += "<span class=\"error\">This is a required field!</span>";
    window.err_exist = true;
} else {
    r_string += document.forms["enrollment"]["name"].value;
}

Then, at the end of getReviewValues() , I return r_string; for dynamic feedback on the status of the form validations. That is, messages like "Name: This is a required field!" .

Now, if I fill out my form but leave some things blank so that I have validation errors, I get the alert "Errors exist in the form!" and the form doesn't submit. Great! However, when I fill out my form so that I have no validation errors, I do get the error message. 收到错误消息。 Great! But, oh no! The form still doesn't submit. And it should!

So, since I'm not getting the error message, then the execution path must be in the conditional if ( !window.err_exist ) . I can see this because function then returns true so that the function never gets to send out the message. But, if it returns true , then my form should submit. So it must be returning false , since the form is not submitting. But if it's returning false , then the execution path cannot be in the assumed conditional. If that were the case, then I would get the message but I do not get the message. This is a contradiction.

Anyone have any ideas?

Answer 1

Instead of an "onclick" handler on your submit button, use the "onsubmit" event on your form element. For example:

<form onsubmit="return validate()">

At this point, as long as your validate method is returning true or false correctly... it should behave how you expect.

See http://www.w3schools.com/jsref/event_form_onsubmit.asp for a better reference.

Answer 2

When you validation is a success (window.err_exist != false) the script returns true. Thus you are returning true for a click event not a submit.

This could be fixed by doing what jeltine says <form onsubmit="validate()"> or it could be fixed by replacing the

<input class="buttons" type="submit" name="submit" onclick="return validate()" value="Submit" />

with

<input class="buttons" type="button" name="submit" onclick="validate()" value="Submit" />

Then changing the validate function to call form.submit(); on no errors.

EXAMPLE:

   //must add id to get element by id
    <form name="enrollment" id="enrollment" method="post" action="submit.php">

function validate() {
  // Something is not returning true here so that the form is not being submitted
  if ( !window.err_exist ) {
    // call submit on form
    var myform = document.getElementById("enrollment");
    myform.submit();
  }
  // There are errors
  alert("Errors exist in the form!");
  return false;
}

The advantage to doing it this way is that you have more control over changing form parameters such as action or method if needed. If these will not be needed then just change to onsubmit="" .