CODEWITHSUNDEEP
javascriptformsfunctionvalidation
Siraj Alam
Siraj Alam

Reputation: 10025

Form is submitting even after validation function returning false

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>

Upvotes: 2

Views: 11966

Answers (7)

Christopher Kaggwa
Christopher Kaggwa

Reputation: 11

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.

Upvotes: 0

Nafiu Lawal
Nafiu Lawal

Reputation: 458

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>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

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

Upvotes: 4

Marcel
Marcel

Reputation: 5119

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

Here 's a 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! ;)

Upvotes: 2

Kapila Perera
Kapila Perera

Reputation: 857

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

Upvotes: 2

Ghassen Rjab
Ghassen Rjab

Reputation: 713

You should prevent form submission before calling your function

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

Upvotes: 6

Nitesh Goyal
Nitesh Goyal

Reputation: 586

Do not use return inside onsubmit. 

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

Upvotes: 1

Related Questions