52

フォームとフォームの外側にボタンがある単純なページがあります。ボタンのクリックでフォームを検証しようとしています。document.onready 関数にフォームの検証ルールを追加しました。ただし、フォームは検証されていません。

HTML:-

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS:-

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },
   messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

何が問題なのですか？

4

3 に答える 3

137

ハンドラー内clickでの間違いは.validate()メソッドです。プラグインを初期化するだけで、form.

submit内にボタンを配置する必要をなくすにはform、 を使用.valid()して検証チェックをトリガーします...

$('#btn').on('click', function() {
    $("#form1").valid();
});

jsFiddle デモ

.validate()- DOM の準備ができたら、プラグインを (オプションを使用して) 初期化します。

.valid()- 検証状態 (ブール値) を確認するformか、いつでも検証テストをトリガーします。

それ以外の場合、コンテナーtype="submit"内にボタンがある場合、プラグインが自動的にキャプチャするため、特別なハンドラーとメソッドformは必要ありません。click.valid()

clickハンドラーなしのデモ

編集：

HTML内にも2つの問題があります...

<input id="field1" type="text" class="required">

  • class="required"内でルールを宣言する場合は必要ありません.validate()。それは冗長で不必要です。

  • name属性がありません。ルールは、 によって内部で宣言さ.validate()れますname。nameプラグインは、入力を追跡するために一意の属性に依存します。

する必要があります...

<input name="field1" id="field1" type="text" />
于 2012-12-02T17:34:37.800 に答える
2 
$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

<form id="form1" name="form1">
     Field 1: <input id="field1" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>

あなたも type="button" を使用しています。また、送信ボタンを分離してフォーム内に配置する必要がある理由がわかりません。そのようにした方が適切です。これはうまくいくはずです。

于 2012-12-02T17:45:11.907 に答える