即使在验证函数返回 false 后，表单仍在提交

Question

This question is asked many times. And I reviewed most of them and the problem in all the cases was.

1. They were not writing return before function call onSubmit form.

2. They were using onClick instead of onSubmit .

3. They were returning false inside if statement, so if the if is not true so function returning true and form is submitting.

But my case different from all the above cases.

HTML:

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="return validateForm()">
    /*Various input fields.*/    
</form>

JavaScript:

        <script>
            function validateForm(){

                /*Validating phone numner*/
                var phone = document.forms["booksUpload"]["phone-number"].value;
                var phErr = document.getElementById("phError");

                if(phone.toString().length != 10){
                    phErr.innerHTML = "Enter a valid mobile number (10 digits)";
                }
                else{
                    phErr.innerHTML = "";
                }

                /*Validating Status*/
                var status = document.forms["booksUpload"]["status"];
                var checked = false;
                var statusErr = document.getElementById("statusError");

                for(var i = 0; i < status.length; i++){
                    if(status[i].checked){
                        checked = true;
                        break;  
                    }
                }

                if(checked == false){
                    statusErr.innerHTML = "Select one option \"Old or New\"";
                }

                else{
                    statusErr.innerHTML = "";
                }

                return false;
            }
        </script>

Answer 1

您应该在调用函数之前阻止表单提交

onsubmit="event.preventDefault(); validateForm();"

Answer 2

I think your submit function is correct ! Just try by writing full html for your function requirement element or id !!!

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="return validateForm()">
    <input type="text" name="phone-number">
    <select name="status"></select>
    <input type="submit"> 
</form>
<p id="phError"></p>
<p id="statusError"></p>

function execution is not reaching till return statement, as something wrong within other statements before return. When everything works good in function so return` statement will execute and return false and form will not submit

Answer 3

In JQuery event.preventDefault() will prevent the default event from occuring, event.stopPropagation() will prevent the event from bubbling up and return false will do both.

In non JQuery return false does not stop the event from bubbling up

Answer 4

I suggest using HTML5 forms with constraint validation . All modern browsers support it and even for the outdated there are good polyfills.

Here 'sa small example.

<form id="constraint-form" method="post" action="">
    <label for="phone-number">phone number</label>
    <input type="tel" name="phone-number" id="phone-number" value="" pattern="[0-9]{10}" required>

    <input type="submit" name="submit-button" value="submit">
</form>

Just have a try for yourself. This small example executes without Javascript and validates the phone number for 10 digits because of its required attribute.

To push even more, you can use Javascript, to display error messages.

<input type="tel" name="phone-number" id="phone-number" value="" pattern="[0-9]{10}" data-valuemissing="Your phone number is required" data-patternmismatch="Please enter digits only. Your phone number needs 10 digits." required>

var form = document.querySelector('#constraint-form');
form.addEventListener('invalid', function(event) {
    event.preventDefault();

    var element = event.target,
        message = element.validationMessage;

    if (element.validity.valueMissing === true && element.dataset.valuemissing !== undefined) {
        message = element.dataset.valuemissing;
    }

    if (element.validity.patternMismatch === true && element.dataset.patternmismatch !== undefined) {
        message = element.dataset.patternmismatch;
    }
}, true);

element.setCustomValidity(message);
alert(message);

This is a small untested example. The form tag gets an invalid event listener and triggers if there 's an invalid form element within this form when submitting it. In this example the phone number input element is required and got its own data attributes as an example how to bind individual error messages to an element. When the element is empty or it doesnt match the pattern, one of the error messages will be alerted.

As long there is an invalid form element one cant submit the form. The magic of constraint validation! ;)

Answer 5

Do not use return inside onsubmit .

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="validateForm()">
    /*Various input fields.*/    
</form>

Answer 6

I have been with the same problem but for my case. I was previously using onsubmit but changed to camel case onSubmit and it works.

Answer 7

Because you did not accept the answer that suggested you use the event.preventDefault() before calling the validation function I want to suggest that you call the preventDefault in you validation function using

<form id="form-box" name="booksUpload" action="action_page.php" onSubmit="return validateForm(event)">
    /*Various input fields.*/    
</form>

and in your javascript use

<script>
    function validateForm(e){
        ...............
        //call this where ever you want to prevent submission
        e.preventDefault();
        .........
    }

</script>