Compartir por

Engadir JavaScript personalizado nun formulario

  • Artigo

Nota

A partir do 12 de outubro de 2022, Portais de Power Apps é Power Pages. Máis información: Microsoft Power Pages xa está dispoñible de forma xeral (blog)
Proximamente migraremos e uniremos a documentación de Portais de Power Apps coa documentación de Power Pages.

Os rexistros de pasos formulario básico e multipasos conteñen un campo chamado JavaScript personalizado que pode utilizar para almacenar código de JavaScript para poder estender ou modificar a función ou a presentación visual do formulario.

O bloque personalizado de JavaScript que se engadirá á parte inferior da páxina xusto antes do elemento de peche da etiqueta do formulario.

Campos de formulario

O ID de entrada do HTML dun campo de táboa está definido como o nome lóxico do atributo. Selección dun campo, valores de configuración ou calquera outra manipulación por parte do cliente con jQuery.

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

Importante

Engadir unha columna de selección ao formulario baseado en modelos para ser usado nun paso de formulario de varios pasos ou nun formulario básico aparecerá na páxina do portal como un control do servidor despregable. Ao usar JavaScript personalizado para engadir valores adicionais ao control, aparecerá unha mensaxe "Argumento de devolución ou devolución de chamada non válido" no envío da páxina.

Validación adicional do campo da parte do cliente

Ás veces é posible que necesite personalizar a validación de campos do formulario. Este exemplo obriga ao usuario a especificar un correo electrónico só se o outro campo para o método de contacto preferido está definido como Correo.

Nota

A validación de campo do lado do cliente non se admite nunha subgrade.

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ón xeral

Ao premer no botón Seguinte/Enviar , execútase unha función chamada entityFormClientValidate. Pode estender este método para engadir lóxica de validación personalizada.

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

Consulte tamén