Comparteix a través de

Afegir JavaScript personalitzat a un formulari

  • Article

Nota

Des del 12 d'octubre de 2022, els portals del Power Apps són Power Pages. Més informació: Microsoft Power Pages ara està disponible de manera general (bloc)
Ben aviat migrarem i combinarem la documentació dels portals del Power Apps amb la documentació del Power Pages.

Tant el formulari bàsic com el formulari de diversos passos contenen un camp que s'anomena JavaScript personalitzat que es pot utilitzar per emmagatzemar el codi JavaScript perquè es pugui ampliar o modificar la visualització o la funció visual del formulari.

El bloc personalitzat de JavaScript s'afegirà a la part inferior de la pàgina davant de l'element de l'etiqueta del formulari de tancament.

Camps de formulari

L'identificador d'entrada HTML d'un camp de taula es defineix com a nom lògic de l'atribut. Selecció d'un camp, de valors de configuració o la manipulació d'altres clients fàcil amb jQuery.

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

Important

Si afegiu una columna d'opcions al formulari basat en model per utilitzar-la en un pas de formulari de diversos passos o es mostrarà un formulari bàsic a la pàgina del portal com a control de servidor desplegable. L'ús de JavaScript personalitzat per afegir valors addicionals al control tindrà com a conseqüència un missatge "Argument de tornar a publicar o de resposta no vàlid" a l'enviament de la pàgina.

Validació dels camps de clients addicional

A vegades podeu necessitar personalitzar la validació de camps al formulari. Aquest exemple obliga l'usuarisi a especificar un correu electrònic només si un altre camp del mètode de contacte preferit està establert en Correu electrònic.

Nota

La validació de l'àmbit del client no s'admet en una subquadrícula.

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

Validació general

Si feu clic al botó Següent/Envia s'executa una funció que s'anomena entityFormClientValidate. Podeu ampliar aquest mètode per afegir una lògica de validació personalitzada.

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

Consulteu també