jquery valider la saisie du formulaire si certaines cases sont cochées

Question

J'ai un formulaire en plusieurs parties qui prend les informations de base de l'utilisateur au début avec une vérification d'erreur jquery.validate pour voir si les champs ont été remplis et l'adresse e-mail est valide. Ci-dessous, il y a une série de cases à cocher (type_of_request) pour les nouveaux comptes, les comptes supprimés, les nouveaux logiciels, etc. qui affichent/cachent ces éléments lorsqu'ils sont cochés/décochés.

Je souhaite valider les sections requises sur le formulaire UNIQUEMENT si l'item correspondant de type_of_request a été coché.

---

informations de mise à jour

---

C'est une bonne solution, mais semble faire tous les enfants de la section sélectionnée nécessaire.

Un scénario typique sera à la fois l'e-mail et d'autres case à cocher dans le type_request a été sélectionné:

<div id="email" style="display: block;"> // shown because other has been selected in the type request 
    <input id="email_new_account" class="sq-form-field" type="checkbox" value="0" name="q4836:q1"/> // not required 
    <input id="email_new_account_name" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required 
    <input id="email_new_account_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required 
    <input id="email_new_account_manager" class="sq-form-field" type="text" name="q4836:q3"/> // if email_new_account checked then make required 

    <input id="email_add_remove_access" class="sq-form-field" type="checkbox" value="0" name="q4837:q1"/> // not required 
    <input id="email_add_remove_account_name" class="sq-form-field" type="text" name="q4837:q2"/> // if email_add_remove_access checked then make required 
    <input id="email_add_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_add_remove_access checked then make required 
    <input id="email_remove_access" class="sq-form-field" type="text" name="q4837:q3"/> // if email_add_remove_access checked then make required 
    </div> 
    <div id="other" style="display: block;"> // shown because other has been selected in the type request 
    <input id="other_describe_request" class="sq-form-field" type="text" name="q4838:q1"/> // required because #other was checked in type request 
    <input id="other_request_justification" class="sq-form-field" type="text" name="q48387:q2"/> // required because #other was checked in type request 
    </div> 

---

Lectures

---

J'ai examiné encore plus loin et a constaté que les éléments suivants peuvent être ajoutés à la classe des éléments d'entrée

class="{required:true, messages:{required:'Please enter 
your email address'}}" 

ou

class="{required:true, email:true, messages:{required:'Please enter 
your email address', email:'Please enter a valid email address'}}" 

mais quand j'ajoute

class="{required:'input[@name=other]:checked'}" 

qui a été décrit sur le site http://jquery.bassistance.de, il ne fonctionne pas. Ai-je besoin de changer la syntaxe pour que cela fonctionne?

Answer 1

La solution que je fini par aller avec était de relier les jquery.validate.js et jquery.metadata.js de http://bassistance.de/jquery-plugins/jquery-plugin-validation/

j'avais alors une liste de vérification des types de requêtes en haut du formulaire qui affichent/cachent l'élément id lorsque vous avez coché l'élément (afficher/masquer la fonction non montrée).

<fieldset id="request-type"> 
<legend>Type of Request</legend> 
<ul> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_0" value="0" class="sq-form-field" /><label for="q4838_q1_0">New account</label></li> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_1" value="1" class="sq-form-field" /><label for="q4838_q1_1">Delete account</label></li> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_2" value="2" class="sq-form-field" /><label for="q4838_q1_2">Change access/account transfer</label></li> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_3" value="3" class="sq-form-field" /><label for="q4838_q1_3">Hardware</label></li> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_4" value="4" class="sq-form-field" /><label for="q4838_q1_4">Software</label></li> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_5" value="5" class="sq-form-field" /><label for="q4838_q1_5">Email</label></li> 
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_6" value="6" class="sq-form-field" /><label for="q4838_q1_6">Other</label></li> 
</ul> 
</fieldset> 

Pour cet exemple, nous dirons que « Supprimer le compte » a été vérifié qui serait « spectacle »

<fieldset id="delete-account" style="display: block;"> 

Parce que les deux champs d'entrée dans le fieldset sont nécessaires lorsque l'option Supprimer le compte est vérifié J'ai ajouté ce qui suit à l'attribut de classe de l'entrée requise.

class="{required:'#checkboxid:checked', messages:{required:'required error message'}}" 

« Supprimer compte » fieldset ressemble alors à ceci .....

<fieldset id="delete-account" style="display: block;"> 
<legend>Delete Account</legend> 

<label for="q4832_q1">Cessation date</label> 
<input type="text" name="q4832:q1value[d]" value="" class="{required:'#q4838_q1_1:checked', messages:{required:'Enter Cessation Date'}}" id="q4832:q1value[d]" /> 

<label for="q4832_q1">List of assets</label> 
<input type="text" name="q4832:q2" value="" class="{required:'#q4838_q1_1:checked', messages:{required:'Enter Cessation Date'}}" id="q4832:q2" /> 
</fieldset> 

La « nécessaire » la valeur de la classe travaille habituellement sur vrai ou faux-à-dire {required:'true', messages:{required:'This field is required'}}, mais dans ce cas, nous y mettons une référence au lieu de la norme vrai ou faux, #checkboxid:checked. Si elle est cochée, elle retourne 'true' et le champ devient obligatoire, et s'il revient 'false', le champ n'est pas requis.

Une autre chose que je trouve utile était de faire en sorte que quelqu'un a choisi un type de demande au début du formulaire en ajoutant ce qui suit à l'attribut class sur chacune des cases

class="{required:'true', minlength:1, messages:{required:'Please select a checkbox'}}" 

Si vous avez besoin plus d'un case à cocher sélectionnée, il suffit d'ajouter à la longueur minimale.

Answer 2

En supposant que vous utilisez le jQuery validation plugin, vous pouvez définir/effacer la classe de chacun des contrôles dans les sections requises/non requises en fonction de la case à cocher sur laquelle vous avez cliqué.

$(document).ready(function() { $('form').validate(); }); 

function init_validation(divName) 
{ 
    $('div#' + divName).find('input').addClass('required'); 
    $('div#inputs').children('div:not(#' + divName + ')') 
        .find('input') 
        .removeClass('required'); 
} 

HTML:

<form> 
<div> 
    <input type='radio' 
     id='new_account_radio' 
     name='interface_selector' 
     value='new_account' 
     selected=true 
     onclick='init_validation("new_account");' /> New Account 

    <input type='radio' 
     id='delete_account_radio' 
     name='interface_selector' 
     value='delete_account' 
     onclick='init_validation("delete_account");' /> Delete Account 

    <input type='radio' 
     id='new_software_radio' 
     name='interface_selector' 
     value='new_software' 
     onclick='init_validation("new_software");' /> New Software 

</div> 

<div id='inputs'> 
    <div id='new_account'> 
     <input type='text' id='new_account_name' class='required' /> 
    </div> 

    <div id='delete_account'> 
     <input type='text' id='delete_account_name' /> 
    </div> 

    <div id='new_software'> 
     <input type='text' id='new_software_name' /> 
    </div> 
</div> 
</form>