JQuery 버튼 클릭시 드롭 다운 선택 유효성 검사

Question

버튼 클릭시 드롭 다운 ASP 컨트롤의 유효성을 검사하는 데 문제가 있습니다. 라디오 버튼, 텍스트 상자, 드롭 다운 및 저장 버튼이 포함 된 패널이 있습니다. 우편 번호에 대한 라디오 버튼이 선택되면 드롭 다운 목록이 나타나고 (코드 뒤에있는 데이터로 바인드 됨) 목록에서 zip을 선택해야합니다. 저장 버튼을 클릭했을 때 유효성 검사를하는 중 문제가 발생했습니다. jQuery를 사용하여 작업하고 싶습니다. 팝업 및 경고하지만 작동하지 않도록 할 수 있습니다. 단추의 onClick에서 수행하기 전에 선택 영역의 유효성을 검사하도록하십시오.

<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional"> 
<ContentTemplate> 
    <table style="text-align:center;" cellpadding="5px"> 
     <tr> 
      <td> 
       <table runat="server" id="_table" width="100%" cellspacing="10"> 
        <tr> 
         <td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle"> 
          <div>STEP 1:</div> 
          <div>Enter a #</div> 
         </td> 
         <td align="left" valign="middle" style=" margin-bottom:15px;"> 
          <asp:TextBox runat="server" ID="txt_nbr" Width="70px"/> 
          <asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/> 
         </td> 
        </tr> 
        <tr> 
         <td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">        
         </td> 
         <td style="border:2px solid gray; background-color:Silver;"> 
          <table runat="server" id="SHTable" visible="false" width="100%"> 
           <tr align="left"> 
            <th style="font-weight:bold;border-bottom:2px solid black;">Methods</th> 
            <th style="font-weight:bold;border-bottom:2px solid black;">Location</th> 
            <th style="font-weight:bold;border-bottom:2px solid black;">&nbsp;<asp:Label runat="server" ID="DOTEXT"></asp:Label></th> 
           </tr> 
           <tr align="left"> 
            <td> 
             <div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div> 
            </td> 
            <td style="width:300px;"> 
             <asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle"> 
          <div>Confirm changes and hit save</div>  
         </td> 
         <td align="left" valign="middle"> 
          <asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 

    </table> 
</ContentTemplate> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#btn_submit').click(function() { 
     if ($('#ZIPDD').val() > 0) { 
      return true; 
     } 
     else { 
      alert('Please select a zip.'); 
      return false; 
     } 
    }); 

}); 

는 페이지로드는 jQuery.validate 플러그인을 사용하여 볼 해달라고 왜

 protected void Page_Load(object sender, EventArgs e) 
{ 
    if (ZIPDD.Items.Count == 0) 
    { 
     Loadzips(); 
    } 
} 
private void LoadBranches() 
{ 
    using (SqlConnection SQLCONN) 
    { 
     SQLCONN.Open(); 
     SqlCommand SQLCOMM = SQLCONN.CreateCommand(); 
     SQLCOMM.CommandText = "SELECT * FROM table"; 
     IDataReader dr = SQLCOMM.ExecuteReader(); 
     ZIPDD.DataSource = dr; 
     ZIPDD.DataValueField = "ZIPID"; 
     ZIPDD.DataTextField = "ZIPLABEL"; 
     ZIPDD.DataBind(); 
     ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty)); 
     ZIPDD.SelectedIndex = 0; 
    } 
} 

Answer 1

을 찾고 시작하는 좋은 장소입니다. 테이블 및 컨트롤에 visible="false"을 설정하면 클라이언트 측에서 렌더링되지 않습니다. jquery를 사용하여 찾을 수 없습니다. 에

<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/> 

이에

<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/> 

이 변경 또한

<table runat="server" id="SHTable" style="display:none" width="100%"> 

및이에

<table runat="server" id="SHTable" visible="false" width="100%"> 

: 제대로 작동하려면이 설정해야 스크립트를 테스트하고 tabl에 style="display:block"을 설정하십시오. e와 드롭 다운도 있습니다. 그렇지 않으면 우편 번호를 선택할 porpup이 표시됩니다 (드롭 다운 값은 0 임).

행운을 빈다.

Answer 2

에 뒤에 코드에서 드롭 다운 바인딩. 클래스에 "required"가 첨부 된 모든 양식 항목의 유효성을 검사합니다. 확인란을 선택하면 jQuery와 addClass를 사용하여 필요한 클래스를 드롭 다운에 추가 할 수 있습니다.

if($('#radio_button').is(':checked')) { 
$(".dropDownClassIdentifier").addClass("required"); 
} 
else 
{ 
$(".dropDownClassIdentifier").removeClass("required"); 
} 

http://jqueryvalidation.org/ 및 http://api.jquery.com/addClass/은 컨트롤이 클라이언트 측에서 렌더링되는 방법에주의, 자바 스크립트/jQuery를 사용하려는 경우 문서