사용자 정의 검사기가 텍스트를 빨간색으로 바꿉니다

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 개의 레이블/텍스트 상자 쌍이 있습니다. 각각은 자체 검증 그룹에 있습니다. 버튼 하나를 클릭하면 모든 것이 완벽하게 작동합니다. Label1이 빨간색으로 바뀝니다. 그런 다음 buton 2를 클릭하면 label2가 빨간색으로 바뀝니다. 레이블 1은 회색으로 되돌아 가지 않습니다. 회색으로 바꿔 줘야 해. 몇 가지 유효성 검사 그룹에서 사용할 수있는 일반적인 솔루션이 필요합니다.

jQuery를 통해 유효성 검사 그룹에 액세스하는 방법을 잘 모릅니다.

감사

<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>은 <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) 메서드를 사용하여 텍스트 상자에 원하는 클래스를 설정하는 것이 어떻습니까? 그런 식으로 사이트의 모습을 변경하면, 자바 스크립트를 통해 자신을 파묻고 변화를 발견하지 못할 것입니다.