Adicionar JavaScript personalizado a um formulário

  • Artigo

Os registros da etapa dos formulários básicos e do formulários 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 escolha ao formulário baseado em modelo para ser usado em uma etapa de Formulário Avançado ou básico aparecerá na página do portal como um controle de servidor suspenso. 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