web-dev-qa-db-ja.com

ASP.NET WebフォームのjQuery検証プラグイン

ASP.NET Web Formsアプリケーション（MVCではなく）でjQuery Validationプラグインを使用したいと考えています。 aspバリデーターをどこにでも追加し、すべてのフィールドを検証するコントロールを設定するよりも簡単です。

このclass = "required email"のようにクラスを設定するときに、メインフォームタグ内にフォームタグがあることに関係していると思われる両方の問題があります。

また、ASPコントロールでマングルされた名前を使用してjquery validateを呼び出すときに問題が発生します

// validate signup form on keyup and submit
$("#signupForm").validate({
    rules: { 
        username: {
            required: true,
            minlength: 2
        }, },
    messages: { 
        username: {
            required: "Please enter a username",
            minlength: "username at least 2 characters"
        }, 
    }.

.......

        <p>
            <label for="username">
                Username</label>
            <input id="username" name="username" />
        </p>

これは

<asp:TextBox ID="tbUsername"  runat="server"></asp:TextBox>

としてレンダリング

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />

名前をマングルします。 <%=tbUsername.ClientID %>を使用してClientIDを取得できますが、ClientNameでは機能しません

Asp.netでjqueryバリデータプラグインを使用して成功した人はいますか？もしそうなら、別々の検証グループを使用するのと同じように、複数のフォームを使用するのはどうですか？

asp.netjqueryvalidationwebformsjquery-validate
43
eiu165

rules add function をチェックアウトできますが、基本的に次のことができます：

jQuery(function() {
    // You can specify some validation options here but not rules and messages
    jQuery('form').validate(); 
    // Add a custom class to your name mangled input and add rules like this
    jQuery('.username').rules('add', { 
        required: true, 
        messages: { 
            required: 'Some custom message for the username required field' 
        } 
    });
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" />

このように、webformsエンジンによって生成される不正な識別子を心配する必要はありません。

46
Darin Dimitrov

以下に、 WebFormsでjQuery Validationプラグインを使用 および 検証グループの概念をエミュレート の例を示します。いくつかの問題を解決したら、実際にはかなりうまく機能します。

11
Dave Ward
$("#signupForm").validate({
        rules: { 
                <%= tbUsername.UniqueID %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= tbUsername.UniqueID %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        });

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>
11
1984kg

ここでxVal.webFormsを確認できます。 http://xvalwebforms.codeplex.com/

4
Carlos Mendible

最良の解決策は、jQueryルールでtbUsernameの代わりに「<％= tbUsername.UniqueID％>」を使用することです。

$("#signupForm").validate({
rules: { 
    "<%=tbUsername.UniqueID %>": {
        required: true,
        minlength: 2
    }, },
messages: { 
    "<%=tbUsername.UniqueID %>": {
        required: "Please enter a username",
        minlength: "username at least 2 characters"
    }, 
}.
2
Jackie

ダリンディミトロフが言ったことをテストし、完全に動作しますが、各フィールドに特定のクラスを設定したくない場合は、jQueryセレクターを使用できます。

$('form').validate();
$('input[id$=Username]').rules('add', { 
    required: true, 
    messages: { 
        required: 'Some custom message for the username required field' 
    } 
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />
2
C.Hoffmann

情報 この記事 jQueryとの一致を探すときにControl.ClientIDを使用することになりました...非常に有用な情報...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>
0
Dscoduc

これを行うための優れた方法は、以下を使用することです：

<％= textbox.Name％>または<％= textbox.ClientId％>サーバーアイテムを参照する必要がある場合。

つまり.

var phoneNumb = $('#<%= tPhone.ClientID %>').val();

または

$("#signupForm").validate({
        rules: { 
                <%= username.Name %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= username.Name %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        }.

.......

0
Adam

最近、よく知られているASP.Net検証グループで中継する複数のフォームの問題を解決するxVal.WebFormsのパッチファイルを投稿しました。このパッチは、ASP.Net CausesValidationプロパティもサポートしています。

ヨはここでそれについて読むことができます： http://cmendible.blogspot.com/

0
Carlos Mendible

SharePoint 201異なるユーザーコントロールをビューとして（ajax経由で）ロードすると、JavaScriptをライブラリに移動し、次のようなコントロールIDにサーバータグを使用できない場合にこれが機能することがわかりました。

例：#<%= tPhone.ClientID %>

$('input[id$=tPhone]').rules('add', 
{      
 required: true,      
 messages: 
 {          
  required: 'Some custom message for the username required field'      
 }  
});

さらに、Ajaxを介してユーザーコントロールを動的に読み込む場合は、$（document）.readyを使用できません。ユーザーコントロールの（サーバー側イベント）ページでその罰金を読み込む場合、jQueryを関数ライブラリにカプセル化する必要がありますが、シナリオでは、Ajaxを介してUpdate Panelをロードすると、ダンスしません。

私はまだjQueryを介してユーザーコントロールをロードしようとしませんでした。これは重く見え、ページ全体をロードするように見えますが、おそらく多少速くなります。

ロードテクニックを比較したテストでは、更新パネルは他のテクニックと同じかそれよりも小さいページサイズであり、基本的にはより速くまたははるかに多くのデータがすばやくまたはより速くロードされることが示されました。

0
jason robertson

JQuery.simple.validatorを使用することをお勧めします。jQuery.simple.validatorは、asp.net Webフォームと互換性のある、簡単で軽量でカスタマイズ可能なバリデーターです。

https://github.com/v2msoft/jquery.simple.validator

プラグインとドキュメントを確認することをお勧めします。使用法：

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>

<div id="container">
    <!-- REQUIRED FIELD -->
    <label>Required Field: </label><br/>
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>

    <input type="button" value="Validate" onclick='javascript:validate();' />
</div>


<script type="text/javascript">
    function validate() {
        $("#container").initialize();
        var ok = $("#container").validate();
        if (!ok)  alert("There are errors");
        else alert("Form is ok");
    }
</script
0
Christian