Compartir a través de

Agregar JavaScript personalizado a un formulario

  • Artículo

Nota

A partir del 12 de octubre de 2022, los portales de Power Apps son Power Pages. Más información: Microsoft Power Pages ya está disponible para el público en general (blog)
Pronto migraremos y fusionaremos la documentación de los portales de Power Apps con la documentación de Power Pages.

Tanto los registros de paso del formulario básico como los del formulario de varios pasos contienen un JavaScript personalizado que puede usarse para almacenar código JavaScript que le permitirá ampliar o modificar la función o presentación visual del formulario.

El bloque personalizado de JavaScript se agregará a la parte inferior de la página justo delante el elemento de etiqueta de formulario de cierre.

Campos de formulario

El id. de entrada HTML de un campo de tabla se define con el nombre lógico del atributo. Seleccionar un campo, establecer valores y otras manipulaciones son fáciles con jQuery.

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

Importante

La adición de una columna de opciones al formulario basado en modelo para utilizar en un paso de formulario de varios pasos o un formulario básico aparecerá en la página del portal como un control de servidor desplegable. El uso de JavaScript personalizado para agregar valores adicionales al control dará como resultado un mensaje de "devolución de datos o argumento de devolución de llamada no válido" en el envío de la página.

Validación de campos del lado cliente adicional

A veces puede necesitar personalizar la validación de campos en el formulario. Este ejemplo fuerza al usuario a especificar un correo electrónico solo si el otro campo para el método preferido de contacto está establecido como Correo electrónico.

Nota

La validación de campos del lado cliente no se admite en una subcuadrí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ón general

Al hacer clic en el botón Siguiente/Enviar, se ejecuta una función llamada entityFormClientValidate. Puede ampliar este método para agregar lógica 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 también