验证失败时阻止表单提交

Question

How do I prevent this from submission when validation fails? I don't know what to put in the validateForm function... I have this form:

<form action="ChangePassword" method="POST">  
    <input type="submit" value="Change Password" onclick="validateForm();"/>
</form>

And the validateform function:

<script>
    function validateForm() {
        if(document.getElementById("passError").innerHTML !== "") {
            alert("There are some errors.");
            return false;
        }
    }
</script>

Answer 1

You need to return from your event handler function.

You are currently only returning from validateForm which is a function you call from your event handler function.

onclick="return validateForm();"

Good practise would be:

• to perform the check when it is submitted rather then only when the submit button is clicked (ie use onsubmit on the form instead of onclick on the button).
• to bind your event handlers with JavaScript instead of depending on globals and intrinsic event attributes

Answer 2

Maybe you have to stop the bubbling from your scope with e.preventDefault() instead of return false ?

    function validateForm(event) {
    if(document.getElementById("passError").innerHTML !== "") {
        alert("There are some errors.");
        event.preventDefault();
    }
}

Answer 3

You have to do it in your form. Not in submit button. Like:

<form name="myForm" onsubmit="return validateForm();"> 

And also return true if your validation passes in your validate function.