Dodaj własny JavaScript do formularza

  • Artykuł

Uwaga

12 października 2022 r. funkcja Portale usługi Power Apps została przekształcona w usługę Power Pages. Więcej informacji: Usługa Microsoft Power Pages jest teraz ogólnie dostępna (blog)
Wkrótce zmigrujemy i scalimy dokumentację funkcji Portale usługi Power Apps z dokumentacją usługi Power Pages.

Rekordy kroku formularz podstawowy i formularz obejmujący wiele kroków zawiera pole o nazwie Niestandardowy JavaScript, które może służyć do przechowywania kodu JavaScript, co pozwoli rozszerzyć lub zmodyfikować wyświetlacz lub funkcję formularza.

Niestandardowy blok kodu JavaScript zostanie dodany u dołu strony tuż przed zamknięciem elementu karty formularza.

Pola formularza

Identyfikator danych wejściowych HTML pola tabeli został ustawiony na logiczną nazwę atrybutu. Wybieranie pola, ustawienie wartości lub inne manipulacje wykonywane przez klienta może być łatwo wykonywanie dzięki jQuery.

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

Ważne

Dodanie kolumny wyboru do formularza opartego na modelu, który ma być używany w kroku formularza obejmującego wiele kroków lub formularza podstawowego, będzie wyświetlane na stronie portalu jako formant serwera menu rozwijanego. Użycie niestandardowego języka JavaScript w celu dodania dodatkowych wartości do formantu spowoduje komunikat „Nieprawidłowy argument wywołania zwrotnego lub ogłaszania zwrotnego” podczas przesyłania strony.

Dodatkowe sprawdzanie poprawności pola po stronie klienta

Czasami może być konieczne dostosowanie sprawdzania poprawności pól w formularzu. Ten przykład zmusza użytkownika do podania adresu e-mail tylko wtedy, gdy inne pole dla preferowanej metody kontaktu ustawiono na E-mail.

Uwaga

Sprawdzanie poprawności po stronie klienta pole nie jest obsługiwane w podsiatce.

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

Ogólne sprawdzanie poprawności

Po kliknięciu przycisku Dalej/Prześlij, wykonywana jest funkcja entityFormClientValidate. Możesz rozszerzyć tę metodę, aby dodać niestandardową logikę sprawdzania poprawności.

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

Zobacz też