Validation personnalisée jQuery pour une sélection de radio sélectionnée

Question

Ceci est mon exigence: J'ai un tas de sélections de boîtes radio (types de flux de travail). Si l'une des radios est sélectionnée (c'est-à-dire un type particulier de flux de travail sélectionné), je souhaite exécuter une validation personnalisée sur ce point. C'est ce que j'ai essayé, mais ça ne va pas bien. De l'aide?

partie 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()); } 
    }); 
    }); 

formulaire HTML partie:

<!-- 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

Votre principal problème est probablement le sélecteur, les :checked besoins à côté de la attirubte ([]) sélecteur, donc ce input[name^=rdDir:checked] devrait être input[name^=rdDir]:checked. De votre balisage, il me semble (que vous voulez) que vous le souhaitez si l'un des <input type="radio" class="chooseDir" /> est sélectionné, donc vous devez le changer pour .chooseDir:checked.

De plus, les paires de règles doivent être nameOfElement: { rules}, donc au lieu de chooseDir, vous voulez que rdDir soit réellement requis. Juste un conseil cependant, vous pouvez également le faire sans méthode personnalisée (si vous ne l'utilisez pas à plusieurs endroits, auquel cas je m'en tiendrai à la méthode personnalisée) puisque required: peut prendre un sélecteur à la place de seulement true/false. Si le sélecteur trouve quelque chose, c'est nécessaire, sinon, ce n'est pas nécessaire.

est ici tout ce qui précède mis en place pour que vous puissiez voir que l'image entière ressemble à:

$("#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()); } 
}); 

Dans le code ci-dessus, la liste des boutons radio rdDir est nécessaire si l'un des boutons radio class="chooseDir" sont sélectionnés, affichera le message fourni s'il est requis et n'est pas rempli.