onsubmit method doesn't stop submit

Question

My onsubmit is not working. My idea was to put some mandatory fields and, in order to achieve that, I was using the onsubmit method inside a form in HTML that called a JavaScript function.

The idea was if all the mandatory fields were filled, the javascript function would return true and it would move on to page /control/Cadastro.php. Otherwise, if any mandatory field was empty, it would return false and it wouldn't move to page /control/Cadastro.php, staying in the current page until true.

Unfortunately, the function does return false if all the mandatory fields are not filled, as expected, but it still moves to page /control/Cadastro.php, even if it shouldn't.

I'm going to cut off some code to make my point of view perceptible.

<!DOCTYPE html>
<html>
    <head>
        <script>
            function ValidateRequiredFields()
            {
                var message = new String('\nCampos obrigatórios:\n');
                var flag=new Boolean(1);
                var x=document.forms["theForm"]["nr_processoCA"].value;
                if (x==null || x==""){
                    message += '\nNº do processo\n'; 
                    flag = new Boolean(0);
                } 
                if (flag == false){
                    alert(message);
                }
                return flag;    
            }
        </script>
    </head>
    <body>
        <form name="theForm" onsubmit="return ValidateRequiredFields()" method="post" action="../control/Cadastro.php"> 
            Nº do Processo: <br>
            <input type="text" name="nr_processoCA" class="input-xlarge">
            <br>
            <div class="row-fluid" style="text-align:center;">
                <input type="submit" class="btn btn-primary btn-large" value="Gravar">
            </div>   
         </form>
    </body>
</html>

Don't be so verbose, just write `var flag = true` or `flag = false`, idem for `String` :) — moonwave99, Sep 27 '12 at 14:05

score 13 · Accepted Answer · edited Mar 10 '14 at 12:50

You should use preventDefault inside your onsubmit function. I modified your code:

function ValidateRequiredFields()
{
    var message = new String('\nCampos obrigatórios:\n');
    var flag=new Boolean(1);


    var x=document.forms["theForm"]["nr_processoCA"].value;
    if (x==null || x==""){
        message += '\nNº do processo\n'; 
        flag = new Boolean(0);
    }

    if (flag == false){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false; // for IE as dont support preventDefault;
        }
        alert(message);
    }

    return flag;
}

DEMO

Glenn Ferrie · Answer 2 · 2015-06-10T16:51:16.673

To make this work, your ValidateRequiredFields function needs to return a boolean value. And then you should attach that method to the onSubmit event. Remember, that for onsubmit you need to use the return keyword.

This code sample works:

<!DOCTYPE html>
<html>
<head>
<script>
    function ValidateRequiredFields() {
        var message = new String('\nCampos obrigatórios:\n');
        var flag=1;

        var x=document.forms["theForm"]["nr_processoCA"].value;
        if (x==null || x==""){
            message += '\nNº do processo\n'; 
           alert(message);
           return false;
        }
        return true;
    }
</script>
</head>

<body>

<form name="theForm" method="post" action="../control/Cadastro.php" onSubmit="return ValidateRequiredFields()">


Nº do Processo: <br><input type="text" name="nr_processoCA" class="input-xlarge"><br>

<div class="row-fluid" style="text-align:center;">
    <input type="submit" class="btn btn-primary btn-large" value="Gravar">
</div>   

</form>

</body>
</html>

score 2 · Answer 3 · answered Sep 27 '12 at 14:08

2

i suggest to put a button that will run the form if true:

 <input type='button' onclick="if (ValidateRequiredFields()) document.forms['theForm'].submit();" />

that's all....

answered Sep 27 '12 at 14:08

volchkov

69
7

if there is an error inside the function then it wont return false and form will submit. since the form submits you wont see the error... best to test the function first. – volchkov Sep 27 '12 at 14:10
This is what `` is made for, without messing with intrusive js. If there is any error in the validation function, moving it around won't solve the issue. – moonwave99 Sep 27 '12 at 14:11
well at least you will see the error. if it still submits i suggest to search for prevetntdefault function. also it does marvelous job and as long as it's followed by click it's ok from the security view of all browsers – volchkov Sep 27 '12 at 14:13
the dude beneath me is right...always recheck the inouts in .php otherwise people with little tools can cause alot of trouble – volchkov Sep 27 '12 at 14:15

score 1 · Answer 4 · answered Sep 27 '12 at 14:14

1

An object will always evaluate to true, even if it's a Boolean object with value false.

Put flag = true at the top of the function, then flag = false instead of creating a Boolean.

answered Sep 27 '12 at 14:14

limos

1,526
12
13

score 0 · Answer 5 · answered Jan 22 '14 at 16:44

I was having a similar problem. It turned out there was an error in my validation (nested a few functions deep) which was causing JavaScript to quit execution of the function before reaching a return statement. At which point it would just continue with the submit.

My advise to anyone finding this page looking for an answer to "onsubmit method doesn't stop submit" is to step through your validation function with a fine tooth comb.

score 0 · Answer 6 · answered Nov 07 '16 at 02:37

After looking around for an answer that worked for me I decided to just create a solution. The following code allows native HTML5 form validation to run before submitting or running another function (tested in Chrome). Make sure you return false after the function to prevent the form submission.

<input type="submit" value="Submit" onclick='if (document.getElementById("mainForm").checkValidity()) { submitData(); return false;}' />

onsubmit method doesn't stop submit

6 Answers6

Linked