Comment désactiver un validateur en JavaScript (ASP.NET)

Il y a des scénarios où l'on doit valider ou non certaines section d'un formulaire dépendant des choix fait par l'utilisateur. Lorsqu'un utilisateur fait choix qui affecte la validation d'un formulaire, une des méthodes possible est retourner au serveur (Postback) et d'activer ou de désactiver certains validateurs. Par contre lorsque le formulaire comporte beaucoup de champs, cette option peut s’avérer coûteuse car le tout le Viewstate de la page est transféré au serveur. Dans ce cas, il est possible d'activer ou de désactiver certains validateurs en JavaScript, évitant donc un aller/retour au serveur.

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>
            
  <span>  Prénom : </span>

  <asp:TextBox runat="server" ID="TextBoxFirstName" />

</div>
<div>

  <span>Nom : </span>

  <asp:TextBox runat="server" ID="TextBoxLastName" />

</div>


<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" />
    
</form>

Rendu du formulaire sans la case cochée :

Rendu du formulaire avec la case cochée :

Lorsque vous cochez la case CheckBoxMailingList, la fonction ToggleMailingListSection est appelée. Voici le code de la fonction:

<script type="text/javascript">

        
$(document).ready(function () {

            
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";
            }
            
        }
</script>

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 () {

            
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);

            }
            
        }
</script>

Voici en ajoutant les deux lignes ValidatorEnabled, on peut maintenant activer ou désactiver le validateur sans avoir à communiquer avec le serveur!