Partilhar via

Adicionar JavaScript a um formulário

  • Artigo

Ambos os registo de passo formulários básicos e formulários de vários passos contêm um campo denominado JavaScript Personalizado que pode ser utilizado para guardar código JavaScript para permitir a expansão ou a modificação da função ou da visualização do formulário.

O bloco personalizado de JavaScript será adicionado à parte inferior da página, imediatamente antes do elemento da tag de fecho do formulário.

Campos de formulário

O ID de entrada de HTML de um campo de tabela está definido para o nome lógico do atributo. Facilite a seleção de um campo, a definição de valores ou outras manipulações do lado do cliente com o jQuery.

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

Importante

Adicionar uma coluna de escolha ao formulário condicionado por modelo a ser utilizada num passo de formulário de vários passos ou num formulário básico aparecerá na página Web como um controlo do servidor pendente. A utilização do JavaScript personalizado para acrescentar valores adicionais ao controlo resultará numa mensagem "Argumento inválido de postback ou de chamada de retorno" na submissão da página.

Validação do campo do lado do cliente adicional

Por vezes, poderá ser necessário personalizar a validação dos campos no formulário. Este exemplo força o utilizador a especificar um e-mail apenas se outro campo de método de contacto preferencial estiver definido como E-mail.

Nota

A validação de campo do lado do cliente não é suportada numa subgrelha.

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 Seguinte/Submeter é executada uma função denominada entityFormClientValidate. Pode expandir este método para adicionar lógica de validação 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 também