Comparteix a través de

Afegir JavaScript personalitzat a un formulari

  • Article

Tant els registres de passos de formularis bàsics com els de formularis de diversos passos poden contenir un camp anomenat JavaScript personalitzat que es pot utilitzar per emmagatzemar el codi JavaScript perquè la visualització o la funció visual del formulari es pugui ampliar o modificar.

El bloc personalitzat de JavaScript s'afegirà a la part inferior de la pàgina davant de l'element de l'etiqueta del formulari de tancament.

Camps de formulari

L'identificador d'entrada HTML d'un camp de taula es defineix com a nom lògic de l'atribut. Selecció d'un camp, de valors de configuració o la manipulació d'altres clients fàcil amb jQuery.

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

Important

Si afegiu una columna d'opcions a un formulari basat en models que s'utilitzarà en un pas de formulari de diversos passos o en un formulari bàsic, apareixerà a la pàgina web com un control de servidor desplegable. L'ús de JavaScript personalitzat per afegir valors addicionals al control tindrà com a conseqüència un missatge "Argument de tornar a publicar o de resposta no vàlid" a l'enviament de la pàgina.

Validació dels camps de clients addicional

A vegades podeu necessitar personalitzar la validació de camps al formulari. Aquest exemple obliga l'usuari a especificar un correu electrònic només si un altre camp del mètode de contacte preferit està establert en Correu electrònic.

Nota

La validació de l'àmbit del client no s'admet en una subquadrí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ó general

Si feu clic al botó Següent/Envia s'executa una funció que s'anomena entityFormClientValidate. Podeu ampliar aquest mètode per afegir una lògica de validació personalitzada.

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

Consulteu també