Rita Rita - 1 month ago 17
HTML Question

onsubmit method doesn't stop submit

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>

Answer

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