カスタムバリデーターがテキストを赤に変えます

Question

このカスタムバリデーターはjQueryを使用して、空のテキストボックスの検証に基づいてラベルを赤色にします。私が抱えている問題は、検証グループと関係しています。

function ButtonClick(session, args, textBoxId, labelId) { 
$(document).ready 
    (
     function() { 

      var is_valid = $("#" + textBoxId).val() != ""; 
      $("#" + labelId).css("color", is_valid ? "#686868" : "red"); 
      args.IsValid = is_valid; 
     } 
    ); 
} 

ここでは、関数に渡された赤いラベルを回します。このバリデーターに対応するバリデーション・グループも渡す必要があります。検証グループの切り替え時に、他のラベルをグレーに戻す方法が不明です。今は2つのボタンと2つのラベル/テキストボックスのペアがあります。それぞれは独自の検証グループに属しています。ボタン1をクリックすると、すべてが完璧に機能します。 Label1は赤色になります。 2つ目のボタンをクリックすると、label2が赤色に変わります。ラベル1はグレーに戻りません。私はそれを灰色にする必要があります。いくつかの検証グループで動作する汎用ソリューションが必要です。

jQueryを通じて検証グループにアクセスする方法が不明です。

おかげであなたについて最初に実行し、ページ上のすべてのテキストボックスの色をリセットし、あなたのボタンにJavaScript関数をバインドする方法

<div class="formLabel"> 
         <asp:Label ID="lblClientId" runat="server" CssClass="text" meta:resourcekey="lblClientIdResource" /> 
        </div> 
        <div class="formValue"> 
         <asp:TextBox ID="tbClientId" runat="server" CssClass="text" meta:resourcekey="tbClientIdResource" /> 
         <asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:CustomValidator> 
        </div> 

<script src="../../Scripts/Test.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function BtnClickClientId(session, args) { 
      ButtonClick(session, args, "<%= tbClientId.ClientID %>", "<%= lblClientId.ClientID %>"); 
     } 
     function BtnClickLastName(session, args) { 
      ButtonClick(session, args, "<%= tbSearchLastName.ClientID %>", "<%= lblSearchLastName.ClientID %>"); 
     } 
    </script> 

Answer 1

私はASPタグに精通していませんが、<asp:Label>はHTML <label> タグを生成すると確信しています。したがって、この場合には、私は次のことを提案することができます：

function ButtonClick(session, args, textBoxId, labelId) { 
    $(document).ready (
     function() { 
      // $(".formLabel label").css("color", "#686868"); 

      // this one will work independently from ASP generated tags 
      $(".formLabel").css("color", "#686868"); 

      var is_valid = $("#" + textBoxId).val() != ""; 
      $("#" + labelId).css("color", is_valid ? "#686868" : "red"); 
      args.IsValid = is_valid; 
     } 
    ); 
} 

このことにより、最初にあなたがあなたの検証を行って、その後、すべてのラベルとは、「＃686868」の色をデフォルトに設定します。

Answer 2

？あなたが影響を与えたくないページ上の他のテキストボックスがある場合、あなたは、このようなテキストとして、クラスによってそれらをターゲットにすることができます。また

function ResetValidationStates() 
{ 
    $(".text").each(function() { $(this).css("color", "#686868"); }); 
} 

、代わりにあなたのコードに色をインラインで設定します、 CSSファイルにクラスを作成してから、jQuery .addClass(className)と.removeClass(className)メソッドを使用して、テキストボックスに必要なクラスを設定してください。そうすれば、サイトの外観を変えるようになると、JavaScriptを埋め込んで変更を加えることはありません。