Prenons pour exemple un formulaire qui demande à l'utilisateur son prénom, nom et si l'utilisateur coche la case "J'aimerais m'inscrire à la liste de diffusion." et bien nous l’obligeons aussi à saisir son courriel.
Voici le code HTML du formulaire :
<form id="form1" runat="server"><div></form><span> Prénom : </span></div> <div>
<asp:TextBox runat="server" ID="TextBoxFirstName" /><span>Nom : </span></div>
<asp:TextBox runat="server" ID="TextBoxLastName" />
<div><asp:CheckBox ID="CheckBoxMailingList" Text="J'aimerais m'inscrire à la liste de diffusion." runat="server" onclick="ToggleMailingListSection()" /></div> <div id="MailingListSection"><span>Courriel : </span> <asp:TextBox runat="server" ID="TextBoxEmail" /> <asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail" ControlToValidate="TextBoxEmail" runat="server" ErrorMessage="Le courriel est obligatoire!" /></div>
<asp:Button Text="Soumettre" runat="server" />
Rendu du formulaire sans la case cochée :
Rendu du formulaire avec la case cochée :
<script type="text/javascript">
$(document).ready(function () {</script>
ToggleMailingListSection();});
function ToggleMailingListSection() {var checkboxMailingList = document.getElementById("CheckBoxMailingList");}
var mailingListSection = document.getElementById("MailingListSection");
if (checkboxMailingList.checked) {mailingListSection.style.display = "block";}
else {mailingListSection.style.display = "none";}
La fonction ToggleMailingListSection sert à cacher ou afficher la section MailingListSection. Même si la section est cachée en CSS, le validateur est encore actif. Pour désactiver un validateur ASP.NET en JavaScript il suffit d'appeler la fonction ValidatorEnable(validator, enable) accessible via WebResource.axd.
<script type="text/javascript">
$(document).ready(function () {</script>
ToggleMailingListSection();});
function ToggleMailingListSection() {var checkboxMailingList = document.getElementById("CheckBoxMailingList");}
var mailingListSection = document.getElementById("MailingListSection");
var requiredFieldValidatorEmail = document.getElementById("RequiredFieldValidatorEmail");
if (checkboxMailingList.checked) {mailingListSection.style.display = "block";}
ValidatorEnable(requiredFieldValidatorEmail, true);
else {mailingListSection.style.display = "none";}
ValidatorEnable(requiredFieldValidatorEmail, false);
Voici en ajoutant les deux lignes ValidatorEnabled, on peut maintenant activer ou désactiver le validateur sans avoir à communiquer avec le serveur!