Question

我有一个表单，当在页面的不同部分提交生成输出时。所有客户方。我想在尝试生成输出之前验证表单：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
</head>
<body>
    <script language="javascript">
        $(document).ready(function() {
            $( "#processForm" ).validate({
                submitHandler: function(form) {
                    $( "#output" ).empty().append( $("#numberOne").val() );
                }
            });
        });
    </script>
    <form id="processForm">
        <p><input type="text" id="numberOne" value="37" class="required number"/></p>
        <p><input type="text" id="numberTwo" value="63" class="required number"/></p>
        <!--<p><input type="submit" value="Submit"/></p>-->
        <p><button type="submit">Submit</button></p>
    </form>
    <div id="output"></div>
</body>
</html>

numberOne的验证工作正常并阻止我的代码被执行，但对于numberTwo，它似乎允许submitHandler仍然运行。重现的步骤：

打开，按提交，通知37打印在提交按钮
在第一个字段中输入“asdf”，按提交按钮，通知37保留在提交按钮下方
在第一个字段中输入“5”，在第二个字段中输入“asdf”，按提交按钮。 “5”将显示在“提交”按钮下方，即使表单整体无效。

错误消息确实显示，但在按下“提交”时会被清除。我错过了什么？

我尝试了input和button个标记。

Answer 1

尝试在输入上使用name属性。通常，如果要处理或发送数据，则需要添加name属性。因此，您的输入将如下所示：

<input type="text" id="numberOne" name="numberOne" value="37" class="required number"/>
<input type="text" id="numberTwo" name="numberTwo" value="63" class="required number"/>

我创建了一个小提琴，因此您可以确认这是您正在寻找的功能。

http://jsfiddle.net/tokersey/FyjWs/

为什么验证不会阻止提交第二个输入字段的表单？

1 个答案: