Hinzufügen von benutzerdefiniertem JavaScript zu einem Formular

  • Artikel

Sowohl der Datensatz für den Schritt für das Basisformular als auch der Datensatz für den Schritt für das mehrstufige Formular enthalten ein Feld namens Benutzerdefiniertes JavaScript, das zum Speichern von JavaScript-Codes verwendet werden kann und Ihnen die Möglichkeit gibt, die visuelle Anzeige oder die Funktion des Formulars zu erweitern oder zu ändern.

Der benutzerdefinierte JavaScript-Satz wird unten an der Seite hinzugefügt, direkt vor dem abschließenden Form-Tag-Elements.

Formularfelder

Die HTML-Eingabe-ID eines Tabellenfelds wird auf den logischen Namen des Attributs festgelegt. Das Auswählen von Feldern, Einstellungswerten oder anderen clientseitigen Änderungen einfach mit jQuery.

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

Wichtig

Das Hinzufügen einer Auswahlspalte zu einem modellbgesteuerten mehrstufigen Formular, das in einem Schritt des Erweiterten Formulars oder einem Basisformular verwendet werden soll, wird auf der Webseite als Dropdown-Steuerelement angezeigt. Die Verwendung von angepasstem JavaScript, um dem Steuerelement zusätzliche Werte hinzuzufügen, führt zu einer Nachricht „Ungültiges Postback- oder Callback-Argument“ bei der Übermittlung der Seite.

Zusätzliche clientseitige Feldvalidierung

Manchmal müssen Sie die Validierung der Felder auf dem Formular anpassen. Dieses Beispiel zwingt den Benutzer, nur eine E-Mail-Adresse zu definieren, wenn das andere Feld für die bevorzugte Kontaktmethode auf E-Mail festgelegt ist.

Anmerkung

Die clientseitige Feldüberprüfung wird in einem Unterraster nicht unterstützt.

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

Allgemeine Überprüfung

Klicken Sie auf die Schaltfläche Weiter/Übermitteln, um eine Funktion namens entityFormClientValidate auszuführen. Sie können diese Methode erweitern, um benutzerdefinierte Validierungslogik hinzuzufügen.

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

Siehe auch