Пользовательская проверка JQuery для выбранного выбора радио

Question

Это мое требование: у меня есть выбор радио-блоков (типы рабочих процессов). Если выбрана одна из радиостанций (т. Е. Выбран один конкретный тип рабочего процесса), я хочу выполнить на нем пользовательскую проверку. Это то, что я пытался, но не очень хорошо. Любая помощь?

JQuery часть:

  $(document).ready(function() {
    // this part is to expand the child radio selection if particular parent workflow selected
    $("#concernedDirectorChoice").hide();
    $("input[name^=workflowChoice]").change( function (){  
      if($(this).attr("class")=='chooseDir'){
        $("#concernedDirectorChoice").show();
      }else{
        $("#concernedDirectorChoice").hide(); }
      });

    // FORM VALIDATION
    $.validator.addMethod("dirRequired", function(value, element) { 
      return this.optional(element) || ($("input[name^=rdDir:checked]").length);
    }, "That particular workflow requires a Director to be chosen. Please select Director");

    $("#contExpInitiateForm").validate({ 
      debug:true
      ,rules:{ 
        RenewalNo: {required: true, number: true},
        chooseDir: {dirRequired: true},
        workflowChoice: {required: true} }
      ,errorPlacement: function(error, element) {
        $('.errorMessageBox').text(error.html()); }
    });
  });

HTML часть формы:

   <!-- Pick type of workflow -->
   <table class="hr-table" >
       <tr>  <td class="hr-table-label " colspan=2 >Pick Workflow Type</td> </tr>
       <tr>
         <td> <input type="radio" name="workflowChoice" value="1"> </input> </td>
         <td> Workflow 1 </td>
       </tr>
       <tr>
         <td> <input type="radio" name="workflowChoice" value="2"  class="chooseDir"> </input> </td>
         <td> Workflow 2 (Dir selection required) </td>
       </tr>
       <tr>
         <td> <input type="radio" name="workflowChoice" value="3"> </input> </td>
         <td> Workflow 3 </td>
       </tr>
   </table>    

  <!-- Pick Director for Workflow type 2 -->
     <table id="concernedDirectorChoice" name="concernedDirectorChoice" >     
      <tr><td class="hr-table-label" colspan=2 > Choose Concerned Director</td></tr>
  <tr>
    <td><input type="radio" value='Dir1' name="rdDir" /></td>
    <td>Director 1</td>
  </tr>
  <tr>
    <td><input type="radio" value='Dir2' name="rdDir" /></td>
    <td>Director 2</td>
  </tr>
  <tr>
    <td><input type="radio" value='Dir3' name="rdDir" /></td>
    <td>Director 3</td>
  </tr>
   </table>  

Answer 1

Ваша главная проблема, вероятно, в селекторе, :checked должен находиться рядом с селектором attirubte ([]), поэтому input[name^=rdDir:checked] должно быть input[name^=rdDir]:checked.

Из вашей разметки выглядит (для меня!), Что вы хотите, чтобы она потребовалась, если выбрана какая-либо из <input type="radio" class="chooseDir" />, поэтому в любом случае нужно изменить ее на .chooseDir:checked.

Кроме того, пары правил должны быть nameOfElement: { rules}, поэтому вместо chooseDir вы хотите, чтобы rdDir действительно требовалось.

В качестве подсказки, вы также можете сделать это без пользовательского метода (если вы не используете его в нескольких местах, в этом случае я бы придерживался пользовательского метода), поскольку required: может использовать селектор вместо просто true / false. Если селектор что-то находит, это требуется, если нет, то это не требуется.

Вот все вышеперечисленное вместе, чтобы вы могли видеть, что вся картинка выглядит так:

$("#contExpInitiateForm").validate({ 
  debug:true
  ,rules:{ 
    RenewalNo: {required: true, number: true},
    rdDir: {required: ".chooseDir:checked"},
    workflowChoice: {required: true} }
  ,messages:{
    rdDir: "That particular workflow requires a Director to be chosen. Please select Director" }
  ,errorPlacement: function(error, element) {
    $('.errorMessageBox').text(error.html()); }
});

В приведенном выше коде необходим список радиокнопок rdDir, если выбрана любая из радиокнопок class="chooseDir", и будет отображаться сообщение, если оно требуется и не заполнено.