Aangepaste JavaScript aan een formulier toevoegen

  • Artikel

Notitie

Met ingang van 12 oktober 2022 wordt Power Apps-portals hernoemd tot Power Pages. Meer informatie: Microsoft Power Pages is nu algemeen beschikbaar (blog)
We zullen binnenkort de documentatie voor Power Apps-portals migreren en samenvoegen met Power Pages-documentatie.

De staprecords voor basisformulieren en formulieren voor meerdere stappen bevatten een veld met de naam Aangepaste JavaScript dat kan worden gebruikt om JavaScript-code op te slaan, zodat u de visuele weergave of de functie van het formulier kunt uitbreiden of wijzigen.

Het aangepaste blok JavaScript wordt onderaan de pagina toegevoegd, vlak voor het afsluitende formuliercode-element.

Formuliervelden

De id van de HTML-invoer van een tabelveld wordt ingesteld op de logische naam van het kenmerk. Het selecteren van een veld, het instellen van waarden of het uitvoeren van andere bewerkingen vanuit de client is eenvoudig met jQuery.

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

Belangrijk

Wanneer een keuzekolom aan een modelgestuurd formulier wordt toegevoegd voor gebruik in een basisformulier of formulier voor meerdere stappen, wordt deze op de portalpagina weergegeven als een serverbesturingselement voor een vervolgkeuzemenu. Als aangepast JavaScript wordt gebruikt om extra waarden aan het besturingselement toe te voegen, resulteert dit in een bericht Ongeldig postback- of callback-argument op bij indiening van de pagina.

Aanvullende clientveldvalidatie

Soms moet u de validatie van velden in het formulier aanpassen. Dit voorbeeld dwingt de gebruiker alleen een e-mail op te geven als het andere veld voor de voorkeursmethode van contact is ingesteld op E-mail.

Notitie

De veldvalidatie aan clientzijde wordt niet ondersteund in een subraster.

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

Algemene validatie

Wanneer op de knop Volgende/Indienen wordt geklikt, wordt een functie met de naam entityFormClientValidate uitgevoerd. U kunt deze methode uitbreiden om aangepaste validatielogica toe te voegen.

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

Zie ook