Compartilhar via

Adicionar JavaScript personalizado a um formulário

  • Artigo

Observação

Desde o dia 12 de outubro de 2022, os portais do Power Apps passaram a ser Power Pages. Mais Informações: O Microsoft Power Pages já está disponível para todos (blog)
Em breve, migraremos e mesclaremos a documentação dos portais do Power Apps com a documentação do Power Pages.

Os registros da etapa do formulário básico e do formulário de várias etapas contêm um campo chamado JavaScript Personalizado que pode ser usado para armazenar o código JavaScript para permitir que você estenda ou modifique a exibição visual ou a função do formulário.

O bloqueio personalizado do JavaScript será adicionado ao topo da página pouco antes do fechamento do elemento de marca do formulário.

Campos de formulário

A ID de entrada HTML de um campo de tabela é definida como o nome lógico do atributo. Selecionar um campo, definir valores ou outra manipulação por parte do cliente é fácil com o jQuery.

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

Importante

Adicionar uma coluna de opções ao formulário baseado em modelo a ser usado em uma etapa de formulário de várias etapas ou formulário básico aparecerá na página do portal como um suspenso do controle de servidor. Usar JavaScript personalizado para adicionar valores adicionais ao controle resultará em uma mensagem "Postback inválido ou argumento de retorno de chamada" no envio da página.

Validação adicional do campo do cliente

Às vezes, é preciso personalizar a validação dos campos no formulário. Este exemplo força um usuário a especificar um email somente se outro campo para o método de contato preferencial for definido para Email.

Observação

A validação do campo do cliente não tem suporte em uma 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));
}

Validação geral

Ao clicar no botão Avançar/Enviar, uma função com nome entityFormClientValidate é executada. É possível ampliar esse método para adicionar lógica personalizada de validação.

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

Confira também