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」、2番目のフィールドに「asdf」と入力し、送信ボタンを押します。フォーム全体が無効な場合でも、「送信」ボタンの下に「5」が表示されます。

エラーメッセージは表示されますが、「送信」を押すとクリアされます。私は何が欠けていますか？

inputとbuttonタグの両方を試しました。

4

1 に答える 1

3

入力に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/

于 2012-07-15T04:42:20.670 に答える