3

ASP.NET を使用している場合、html ボタン要素ではなく input type="submit" 要素を使用すると、bassistance.de jQuery 検証プラグインがフォーム送信を防止するのはなぜですか?

HTML ボタン (type="submit") タグを使用すると検証が開始されますが、フォームは引き続き送信されます。

jQuery 検証プラグインを HTML ボタン要素で動作させる方法はありますか?

簡単な例:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script type="text/javascript">
            $(document).ready(function () {
                $("#form1").validate({
                    rules: {
                        txtFirstName: {
                            required: true
                        }
                    },
                    messages: {
                        txtFirstName: {
                            required: "* First Name required<br/>"
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <input id="txtFirstName" name="txtFirstName" type="text" />
            <input id="btnSubmit1" type="submit" runat="server" value="Submit" /> <!-- WORKS! -->
            <button it="btnSubmit2" type="submit" runat="server">Submit</button> <!-- DOESN'T WORK -->
        </form>
    </body>
</html>
4

1 に答える 1

6

そのように設計されているようです：

// when a submitHandler is used, capture the submitting button
if (validator.settings.submitHandler) {
  inputsAndButtons.filter(":submit").click(function () {
    validator.submitButton = this;
  });
}

残念ながら、それは焼き付けられているようで、他に選択肢はありません。のドキュメントは:select、これについてさらに光を当てているようです：

The :submit selector typically applies to button or input elements. Note that some browsers treat element as type="default" implicitly while others (such as Internet Explorer) do not.

One solution would be to bind your button to a function that invokes the validation. In the example below we see this being done with an anchor:

$("#myform").validate();
$("a.check").click(function() {
  $("#myform").valid();
});
于 2012-05-19T16:20:19.767 に答える