Hinzufügen von benutzerdefiniertem JavaScript zu einem Formular
Hinweis
Ab 12. Oktober 2022 ist Power Apps-Portale Power Pages. Weitere Informationen: Microsoft Power Pages ist jetzt allgemein verfügbar (Blog)
Wir werden die in Kürze migrieren und die Dokumentation für Power Apps-Portale mit der Power Pages-Dokumentation zusammenführen.
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-Code 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 modellgesteuerten Formular, das in einem Schritt des mehrstufigen Formulars oder einem Basisformular verwendet werden soll, wird auf der Portalseite 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.
Hinweis
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));
}