ASP.NET WebフォームのjQuery検証プラグイン
https://stackoverflow.com/questions/619816
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ASP.NET Webフォームアプリケーション（MVCではなく）でjQuery Validationプラグインを使用したいと思います。 aspバリデーターをどこにでも追加し、すべてのフィールドを検証するコントロールを設定するよりも簡単です。
このclass = <！> quot; required email <！> quot;のようにクラスを設定するときに、いくつかの問題が発生します。これは、メインフォームタグ内にフォームタグを持つことに関係があると思います。
また、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バリデータプラグインを使用して成功した人はいますか？ もしそうなら、個別の検証グループを使用するのと同じように、複数のフォームを使用するのはどうですか？
解決
ルール追加機能をチェックアウトできますが、基本的には次のとおりです。できること：
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エンジンによって生成される不正な識別子を心配する必要がなくなります。
他のヒント
jQueryの使用例WebFormsを使用した検証プラグインおよび検証グループの概念をエミュレートする。いくつかの問題を解決すると、実際に非常にうまく機能します。
$("#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>
ここでxVal.webFormsを確認できます： http://xvalwebforms.codeplex.com/
ダリン・ディミトロフが言ったことをテストし、完全に機能しますが、各フィールドに特定のクラスを設定したくない場合は、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" />
最良の解決策は、使用<！> quot; <！> lt;％= tbUsername.UniqueID％<！> gt; <！> quot; jQueryルールのtbUsernameの代わりに。
$("#signupForm").validate({
rules: {
"<%=tbUsername.UniqueID %>": {
required: true,
minlength: 2
}, },
messages: {
"<%=tbUsername.UniqueID %>": {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
}.
最近、よく知られているASP.Net検証グループで中継する複数のフォームの問題を解決するxVal.WebFormsのパッチファイルを投稿しました。このパッチは、ASP.Net CausesValidationプロパティもサポートしています。
あなたはここでそれについて読むことができます： http://cmendible.blogspot.com/
これを行うための優れた方法は、次を使用することです。
<！> lt;％= textbox.Name％<！> gt; または <！> lt;％= textbox.ClientId％<！> gt; サーバーアイテムを参照する必要があるときはいつでも。
i.e。
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"
},
}.
.......
SharePoint 2010 の場合、javascriptをライブラリに移動し、コントロールIDに次のようなサーバータグを使用できない場合に、異なるユーザーコントロールをビューとして（ajax経由で）ロードすると機能することがわかりました：
e.g #<%= tPhone.ClientID %>
$('input[id$=tPhone]').rules('add',
{
required: true,
messages:
{
required: 'Some custom message for the username required field'
}
});
さらに、Ajaxを介してユーザーコントロールを動的に読み込む場合、$（document）.readyは使用できません。 jQueryを（サーバー側イベント）のユーザーコントロールページで読み込む場合は関数ライブラリにカプセル化する必要がありますが、アップデートパネルでAjaxを介して読み込む場合は踊りません。
私はまだjQueryを介してユーザーコントロールをロードしようとしませんでした。これは重く見え、ページ全体をロードするように見えます。
ロードテクニックを比較したテストでは、更新パネルが他のテクニックと同じかそれよりも小さなページサイズであり、基本的にはより高速またははるかに多くのデータが高速または高速でロードされることが示されました。
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
この記事の情報は、 jQueryとの一致を検索するときにControl.ClientIDを使用する...非常に役立つ情報...
<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>
