web-dev-qa-db-ja.com

ボタンクリック時にフォームを検証するjQuery検証プラグイン

つまり、CSSを介して6つのタブが非表示になり、ユーザーが次にクリックすると別の部分がフェードインする7つの部分からなるフォームがあります。

プラグインが機能していることを確認するためにページを送信しました。です。基本的に、現在の部分を検証せずに、フォームの次の部分に移動するだけです。

例として

HTML

<form id = "form1" action = "backend.php" method = "post">
<label for "phone">First Name </label>
    <input type = "text" name = "fName" placeholder = "First Name..." class = "required" id = "fName" />
<button id = "btn" type = "button" class = "buttonnav next">next</button>
</form>

Javascript

$('#btn').click( function() { $("#form1").validate();});
jqueryformsjquery-validate
9
Art Taylor

jQuery Validate プラグインをコードで使用している場合、プラグインはボタンがクリックされるまで初期化されません。プラグインが初期化されていない場合、検証は行われません。

_$('#btn').click( function() { $("#form1").validate();});
_

代わりに、 .validate() DOMで一度呼び出され、フォーム上のプラグインを初期化する準備ができています。

初期化後いつでもフォームをテストする場合は、 .valid()メソッド を使用します。

_$(document).ready(function () {

    $('#form1').validate({ // initialize plugin
        // your options
    });

    $('#btn').click( function() { 
        $("#form1").valid();  // test the form for validity
    });

});
_

相互作用するように各パーツをどのように設定したか、または他にどのようなコードが使用されているかはわかりません。 OPだけに基づいて、上記の私の答えを使用した実際の例を次に示します。

デモ： http://jsfiddle.net/pqVJM/

_$(document).ready(function () {

    $('#form1').validate();

    $('#btn').click(function () {
        if ($("#form1").valid()) {
            alert('hello - valid form');
        }
    });

});
_
20
Sparky