Textarea 포커스를 기반으로 선택 목록에서 필수 유효성 검사 수행

Question

아래에 설명 된 HTML에서 3 행의 레코드가있는 경우 일부 유효성 검사를 수행해야합니다. 이 세 개의 테이블 행에는 선택 목록 (이유) 필드와 텍스트 영역 항목 ("설명"필드)의 두 가지 입력 가능한 필드가 있습니다.

이 표의 모든 레코드에 대해 jQuery를 사용하여 유효성 검사를 추가해야합니다. 사용자가 먼저 세 개의 테이블 행 중 하나의 텍스트 영역 필드에 커서를 놓을 것인지 확인합니다. 먼저 선택 목록에서 선택 (즉, 옵션 값은 0 일 수 없음) 한 다음 "이유 선택이 필요함"을 나타내는 경고를 표시하고이 "이유"필드에 포커스를 놓습니다.

<table summary="Contacts" class="uReport uReportStandard"> 
    <thead> 
     <tr> 
      <th id="CONTCT_NM">Contact Name</th> 
      <th id="TEL_NO">Telephone 
       <br/>No.</th> 
      <th id="STATE">State</th> 
      <th id="REAS">Reason</th> 
      <th id="DATE_CALLED">Date 
       <br/>Contacted</th> 
      <th id="MPA_COMMENT">Comments</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td headers="CONTCT_NM">Contact A</td> 
      <td headers="TEL_NO">123456</td> 
      <td headers="STATE">VIC</td> 
      <td headers="REAS"> 
       <input type="hidden" name="f01" value="16919" /> 
       <input type="hidden" name="f02" value="100319" /> 
       <select name="f10" id="selectLOV1" class="lov_select"> 
        <option value="0">--- Please select a reason ---</option> 
        <option value="1" selected="selected">Contacted/Spoken</option> 
        <option value="2">Contacted/Unavailable</option> 
        <option value="3">Other</option> 
       </select> 
      </td> 
      <td headers="DATE_CALLED"> 
       <input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42" 
       class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;" 
       /> 
      </td> 
      <td headers="COMMENT"> 
       <textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact A</textarea> 
      </td> 
     </tr> 
     <tr> 
      <td headers="CONTCT_NM">Contact B</td> 
      <td headers="TEL_NO">123456</td> 
      <td headers="STATE">VIC</td> 
      <td headers="REAS"> 
       <input type="hidden" name="f01" value="16919" /> 
       <input type="hidden" name="f02" value="100314" /> 
       <select name="f10" id="selectLOV2" class="lov_select"> 
        <option value="0">--- Please select a reason ---</option> 
        <option value="1" selected="selected">Contacted/Spoken</option> 
        <option value="2">Contacted/Unavailable</option> 
        <option value="3">Other</option> 
       </select> 
      </td> 
      <td headers="DATE_CALLED"> 
       <input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42" 
       class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;" 
       /> 
      </td> 
      <td headers="COMMENT"> 
       <textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact B</textarea> 
      </td> 
     </tr> 
     <tr> 
      <td headers="CONTCT_NM">Contact C</td> 
      <td headers="TEL_NO">123456</td> 
      <td headers="STATE">VIC</td> 
      <td headers="REAS"> 
       <input type="hidden" name="f01" value="16919" /> 
       <input type="hidden" name="f02" value="100312" /> 
       <select name="f10" id="selectLOV3" class="lov_select"> 
        <option value="0">--- Please select a reason ---</option> 
        <option value="1" selected="selected">Contacted/Spoken</option> 
        <option value="2">Contacted/Unavailable</option> 
        <option value="3">Other</option> 
       </select> 
      </td> 
      <td headers="DATE_CALLED"> 
       <input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42" 
       class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;" 
       /> 
      </td> 
      <td headers="COMMENT"> 
       <textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact C</textarea> 
      </td> 
     </tr> 
    </tbody> 
</table> 

모든 도움을 주시면 감사하겠습니다.

감사합니다.

편집 :

Answer 1

는 내가 제대로 이해 한 희망 미안은 경고 잊어 : http://jsfiddle.net/HuVUL/1/