form.validate（）の代わりにcontainer.validate（）のJqueryバリデーション

Question

私たちは、多くの登録フォームを含む新しいumbracoウェブサイトを構築しており、これらのフォームを検証するためにJqueryバリデーションプラグインを使用しています。

各usercontrol（マクロ）にはサーバータグが含まれているので、JQueryの検証を機能させるには、各usercontrolで1つのフォームを使用する必要があります。

しかし、各ユーザーコントロールで1つのフォームを使用しているため、ページに複数のコントロールを追加することはできません。

マスターページにrunat = "server"というフォームタグを追加してから、いくつかのcontainer.validate（）ですべての検証を行います。 form.validate（）の代わりに。

すなわち検証プラグインは、それが<form></form>タグのセット内に含まれることを確認するために起こっている様々なフィールドを必要とするこの

<script type="text/javascript> 

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

</script> 


<div id="regForm"> 

    <input type="text" class="required" name="Name" id="txtName" runat="server"/> 

</div> 

Answer 1

のようなもの。

http://rocketsquared.com/wiki/Plugins/Validation

ただし、フォームの「送信」することなく検証を行うことができます。これは、例としてonkeyup:またはonfocusout:ハンドラでも実現できます。

<div id="regForm">を<form id="regForm" ... >のように変更するだけで検証できます。

EDIT：

For HTML 4、唯一必要form属性がactionなので、あなただけ...これでデフォルトで

<form id="regForm" action="#"> </form> 

Answer 2

をご<div id="regForm"> </div>を置き換えることができない理由はありませんasp.netにはrunat = "server"という形式のフォームしかありません。ただし、Sparkyの回答が示すように、ページに複数のフォームを表示することはできます。 asp.netの複数のフォームの詳細については、http://msdn.microsoft.com/en-us/magazine/cc164151.aspxをご覧ください。

Answer 3

これは遅れての回答ですが、既存の回答はどれも受け入れられていないことがわかりましたが、ここでこれを取り上げます。私はちょうどモーダルダイアログのフォームに含まれているdivを検証する必要があった同様の状況に遭遇しました。ここで私はそれを解決した方法です。

<script type="text/javascript> 
    jQuery(function($) { 
    $('form').validate(); 

    $('.continue').click(function() { 
     var isValid = true; 
     var $div = $(this).closest("div"); 
     $div.find(":input").each(function() { 
      isValid = $(this).valid() && isValid; 
     }); 
     if (isValid) { 
      var $next = $div.hide().next('div'); 
      if ($next.length == 0) { 
       $(form).submit(); 
      } else { 
       $next.show(); 
      } 
     } 
    }); 
    }); 
</script> 

<form action="#"> 
    <div id="div1"> 
     <input type="text" required name="Name" id="txtName"  runat="server"/> 
     <button class="continue">Continue</button> 
    </div> 
    <div id="div2"> 
     <input type="text" required name="Address" id="txtAddress" runat="server"/> 
     <input type="text" required name="City" id="txtCity" runat="server"/> 
     <input type="text" required name="State" id="txtState" runat="server"/> 
     <input type="text" required name="Zip" id="txtZip" runat="server"/> 
     <button class="continue">Continue</button> 
    </div> 
</form>