Ajouter JavaScript personnalisé à un formulaire

  • Article

Notes

À compter du 12 octobre 2022, le portail Power Apps devient Power Pages. Plus d’informations : Microsoft Power Pages est maintenant généralement disponible (blog)
Nous allons bientôt migrer et fusionner la documentation des portails Power Apps avec la documentation de Power Pages.

L’enregistrement d’étape de formulaire de base et de formulaire à plusieurs étapes contient un champ nommé JavaScript personnalisé qui peut être utilisé pour enregistrer du code JavaScript vous permettant d’étendre ou modifier la visualisation ou la fonctionnalité du formulaire.

Le bloc JavaScript personnalisé sera ajouté au bas de la page juste avant la fermeture de l’élément de balise de formulaire.

Champs de formulaire

L’ID d’entrée HTML d’un champ de table est défini sur le nom logique de l’attribut. La sélection d’un champ, la définition des valeurs et autres manipulations côté client sont facilitées avec jQuery.

$(document).ready(function() {
   $("#address1_stateorprovince").val("Saskatchewan");
});

Important

L’ajout d’une colonne de choix au formulaire piloté par modèle à utiliser dans une étape de formulaire à plusieurs étapes ou un formulaire de base apparaîtra sur la page du portail en tant que contrôle serveur déroulant. L’utilisation de JavaScript personnalisé pour ajouter des valeurs supplémentaires au contrôle entraînera un message "argument de publication ou de rappel non valide" sur la soumission de la page.

Validation supplémentaire des champs côté client

Parfois vous devrez peut-être personnaliser la validation des champs du formulaire. Cet exemple force l’utilisateur à spécifier une adresse électronique uniquement si l’autre champ de « méthode de contact privilégiée » est défini sur Courrier électronique.

Notes

La validation de champ côté client n’est pas prise en charge dans une sous-grille.

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         // Create new validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "emailaddress1Validator";
         newValidator.controltovalidate = "emailaddress1";
         newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript:scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email is a required field.</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var contactMethod = $("#preferredcontactmethodcode").val();
            if (contactMethod != 2) return true; // check if contact method is not 'Email'.
            // only require email address if preferred contact method is email.
            var value = $("#emailaddress1").val();
            if (value == null || value == "") {
            return false;
            } else {
               return true;
            }
         };

         // Add the new validator to the page validators array:
         Page_Validators.push(newValidator);

      });
   }(window.jQuery));
}

Validation générale

Le fait de cliquer sur le bouton Suivant/Envoyer exécute une fonction nommée entityFormClientValidate. Vous pouvez étendre cette méthode pour ajouter une logique de validation personnalisée.

if (window.jQuery) {
   (function ($) {
      if (typeof (entityFormClientValidate) != 'undefined') {
         var originalValidationFunction = entityFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            entityFormClientValidate = function() {
               originalValidationFunction.apply(this, arguments);
               // do your custom validation here
               // return false; // to prevent the form submit you need to return false
               // end custom validation.
               return true;
            };
         }
      }
   }(window.jQuery));
}

Voir aussi