9

我onsubmit的不工作。我的想法是放置一些必填字段，为了实现这一点，我onsubmit在 HTML 中的表单中使用了该方法，该方法称为 JavaScript 函数。

这个想法是，如果所有必填字段都已填写，javascript 函数将返回true并转到 page /control/Cadastro.php。否则，如果任何必填字段为空，它将返回false并且不会移动到 page /control/Cadastro.php，一直停留在当前页面直到为真。

不幸的是，如果没有像预期的那样填写所有必填字段，该函数确实会返回false，但它仍然会移动到 page /control/Cadastro.php，即使它不应该这样做。

我将切断一些代码以使我的观点易于理解。

<!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>
4

6 回答 6

13

您应该preventDefault在 onsubmit 函数中使用。我修改了你的代码：

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;
}

演示

于 2012-09-27T14:15:15.743 回答
3

为了使这项工作，您的ValidateRequiredFields函数需要返回一个布尔值。然后你应该将该方法附加到onSubmit事件中。请记住，onsubmit您需要使用return关键字。

此代码示例有效：

<!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>
于 2012-09-27T14:20:47.833 回答
2

我建议放置一个按钮，如果为真，它将运行表单：

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

就这样....

于 2012-09-27T14:08:55.893 回答
1

一个对象总是会评估为真，即使它是一个值为假的布尔对象。

放在flag = true函数的顶部，flag = false而不是创建一个布尔值。

于 2012-09-27T14:14:11.157 回答
0

我遇到了类似的问题。结果证明我的验证中有一个错误（嵌套了几个函数），导致 JavaScript 在到达 return 语句之前退出函数的执行。此时它将继续提交。

我建议任何找到此页面以寻找“onsubmit 方法不会停止提交”答案的人的建议是使用细齿梳逐步完成您的验证功能。

于 2014-01-22T16:44:18.013 回答
0

在四处寻找对我有用的答案后，我决定创建一个解决方案。以下代码允许在提交或运行另一个函数（在 Chrome 中测试）之前运行原生 HTML5 表单验证。确保在函数之后返回 false 以防止表单提交。

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

于 2016-11-07T02:37:23.277 回答