Zdieľať cez

Pridanie vlastného JavaScript do formuláru

  • Článok

Záznamy krokov Základné formuláre aj formuláre s viacerými krokmi obsahujú pole s názvom Vlastný JavaScript, ktoré môže byť použité na uloženie kódu JavaScript umožňujúceho rozšíriť alebo upraviť vizuálne zobrazenie alebo funkcie formulára.

Vlastný blok JavaScript sa pridá na spodnú časť stránky priamo pred uzatvárací prvok značky formulára.

Polia formulára

Vstupné ID HTML poľa tabuľky je nastavené na logický názov atribútu. jQuery tak umožňuje jednoduché označovanie poľa, nastavovanie hodnôt alebo ďalšie manipulácie na strane klienta.

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

Dôležité

Pridanie stĺpca výberu do formulára riadeného modelom, ktorý sa má použiť v kroku formulára s viacerými krokmi alebo základného formulára, sa zobrazí na webovej stránke ako rozbaľovací serverový ovládací prvok. Použitie vlastného kódu JavaScript na pridanie ďalších hodnôt do ovládacieho prvku bude mať za následok správu „Neplatný argument postback alebo callback“ pri odoslaní stránky.

Ďalšie overenie poľa na strane klienta

Niekedy budete musieť prispôsobiť overenie polí formuláru. Tento konkrétny príklad núti používateľa zadať e-mail, iba v prípade, že iné pole pre preferovaný spôsob kontaktu je nastavená na E-mail.

Poznámka

Overenie poľa na strane klienta nie je podporovaný vo vedľajšej mriežke.

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

Všeobecné overenie

Po kliknutí na tlačidlo Ďalej/Odoslať sa spustí funkcia s názvom entityFormClientValidate. Môžete rozšíriť tento spôsob na pridanie vlastnej logiky overovania.

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

Pozrite si tiež