2010-05-19 41 views
14

Tôi có biểu mẫu html đơn giản mà tôi đã thêm xác thực để sử dụng plugin Xác thực JQuery. Tôi có nó làm việc cho các lĩnh vực duy nhất mà đòi hỏi một giá trị. Bây giờ tôi cần phải mở rộng để nếu người dùng trả lời Có cho một câu hỏi họ phải nhập một cái gì đó trong trường Details, nếu không trường Details có thể để trống. Tôi đang sử dụng các nút radio để hiển thị Có/Không. Dưới đây là hình thức html hoàn chỉnh của tôi - Tôi không chắc chắn nơi để đi từ đây:Xác nhận hợp lệ có điều kiện bằng cách sử dụng Plugin xác thực JQuery

<script type="text/javascript" charset="utf-8"> 
    $.metadata.setType("attr", "validate"); 
    $(document).ready(function() { 
    $("#editRecord").validate(); 
    }); 
    </script> 

    <style type="text/css"> 
    .block { display: block; } 
    form.cmxform label.error { display: none; } 
    </style> 

    </head> 
    <body> 

      <div id="header"> 
       <h1> 
        Questions</h1> 
      </div> 
      <div id="content"> 
       <h1> 
        Questions Page 1 
       </h1> 
      </div> 
    <div id="content"> 
       <h1> 
       </h1> 
       <form class="cmxform" method="post" action="editrecord.php"  id="editRecord"> 
       <input type="hidden" name="-action" value="edit"> 
        <h1> 
        Questions     
        </h1> 

      <table width="46%" class="record"> 
      <tr> 
      <td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td> 
      <td width="15%" valign="top" class="field_data"> 
      <label for="Yes"> 
      <input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes 
      </label> 
      <label for="No"> 
    <input type="radio" name="Question1" value="No" /> No 
      </label> 
      <label for="Question1" class="error">You must answer this question to proceed</label> 
      </td> 
      <td width="64%" valign="top" class="field_data"><strong>Details:</strong> 
      <textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td> 
      </tr> 
    <tr> 
      <td valign="top" class="field_name_left">Question 2</td> 
<td valign="top" class="field_data"> 
    <label for="Yes"> 
      <input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes 
      </label> 
      <label for="No"> 
    <input type="radio" name="Question2" value="No" /> No 
      </label> 
      <label for="Question2" class="error">You must answer this question to proceed</label> 
     </td> 
    <td valign="top" class="field_data"><strong>Details:</strong> 
       <textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea>   </td> 
    </tr> 
      <tr class="submit_btn"> 
          <td colspan="3"> 
           <input type="submit" name="-edit" value="Finish"> 
           <input type="reset" name="reset" value="Reset">   </td> 
      </tr> 
      </table> 
     </form> 
    </div> 
    </body> 
    </html> 

Trả lời

19

On <textarea> yếu tố của bạn, thêm một dependency expression cho required, ví dụ cho câu hỏi 1, làm điều này:

validate="required:'input[name=Question1][value=Yes]:checked'" 

này nói nếu $('input[name=Question1][value=Yes]:checked').length > 0 sau đó lĩnh vực này là cần thiết, vì vậy nếu Có được chọn, nó yêu cầu :)

You can see a working demo here

+0

Cảm ơn câu trả lời của bạn. Tôi đã thêm mã vào các thành phần