web-dev-qa-db-ja.com

jquery検証onclick

Jqueryvalidateプラグインに問題があります。意味がありません。誰かが私の間違いがどこにあるかを見ることができますか？

これが私のHTMLです：

_<form id="form">
   <input type="text" name="name" class="required" />
   <input type="text" name="email" class="required email" />
</form>
<a id="link">Save</a>
_

これが私のJSです

_<script src="jquery 1.7.1"></script>
<script src="jquery.validate.1.9"></script>
<script>
    $('#link').click(function()
    {
        $('#form').validate();
        if ($('#form').valid()) // check if form is valid
        {
            // do some stuff
        }
        else 
        {
            // just show validation errors, dont post
        }
    });

</script>
_

フォームが検証されないか、少なくとも.valid()関数が常にtrueを返しますが、理由がわかりません。私はvalidateプラグインを何年も使用しましたが、このコンテキストでは使用しませんでした。

jqueryjquery-validate
7
jtheman

今のところそれを解決しました。これで、バリデーターは私が望むことを実行します。以下のJS、同じHTML：

$(function() 
{ 
   $('#link').click(function() 
   { 
      if ($("input[name=name]").valid() && $("input[name=email]").valid()) 
      { 
         // do some stuff 
      } 
      else 
      { 
         // just show validation errors, dont post 
      } 
   }); 
});
5
jtheman

リンクがあり、フォームを検証する必要がある場合。また、この関数はUIタブの次のタブに移動し、各タブのフォームで各タブを検証します。

$('.next-tab').click(function() { 
    //if form is valid
    if ($("#frmSignup").valid()) {
        //activate next tab
        $('#signuptabs').tabs('enable', $(this).attr("rel"));
        //switch to next tab
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    }
});
8
Enrique

まだレンダリングされていない要素にイベントをアタッチしようとしています

onDOM対応を使用する必要があります

_$(function() {
     $('#link').click(function(){
        $('#form').validate();
        if ($('#form').valid()) // check if form is valid
        {
            // do some stuff
        }
        else 
        {
            // just show validation errors, dont post
        }
    });
});
_

$(functionHandler) == $(document).ready(functionHandler);

ルールNo.1：DOMは、作成するコードの一部の前にレンダリングする必要があると常に考えてください。これは、このサイトで最も一般的な間違いです。 ..

このヒントと、このサイトのjqueryタグで読むことができるその他の多くのヒント 読む

5
gdoron

検証を「ドキュメント上で準備完了」にする必要があります

$(document).ready(function(){
    $('#form').validate();
});
3
Peter