0

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

<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仍然允许运行。重现步骤：

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

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

我尝试了input和button标签。

4

1 回答 1

3

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

<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/

于 2012-07-15T04:42:20.670 回答