web-dev-qa-db-ja.com

ボタンクリック時のjQueryフォーム検証

フォームとフォームの外側にボタンがあるシンプルなページがあります。ボタンのクリックでフォームを検証しようとしています。 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
});

});

何が間違っているのでしょうか？

jqueryjquery-validate
43
ajithmanmu

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

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

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

jsFiddle Demo

.validate()-プラグインを初期化するには（オプション付き）onceon DOM ready。

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

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

clickハンドラーなしのデモ

編集：

また、HTMLには2つの問題があります...

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

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

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

あるべき...

<input name="field1" id="field1" type="text" />
117
Sparky
$(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"を使用しています。そして、なぜ送信ボタンを分離し、フォーム内に配置する必要があるのか​​分かりません。そのようにする方が適切です。これは動作するはずです。

2
Wap

buttonタグを使用して他の方法を実現することもできます

新しいhtml5属性に従って、次のようなフォーム属性を追加することもできます

<form id="formId">
    <input type="text" name="fname">
</form>

<button id="myButton" form='#formId'>My Awesome Button</button>

そのため、ボタンはフォームに添付されます。

これは、jQueryのvalidate（）プラグインで次のように機能するはずです。

var validator = $( "#formId" ).validate();
validator.element( "#myButton" );

inputタグでも動作します

ソース：

https://developer.mozilla.org/docs/Web/HTML/Element/Button

0
Daryl Cluzel