Menambahkan JavaScript kustom ke formulir

Catatan

Mulai 12 Oktober 2022, portal Power Apps menjadi Power Pages. Informasi selengkapnya: Microsoft Power Pages kini tersedia secara umum (blog)
Kami akan segera memigrasikan dan menggabungkan dokumentasi portal Power Apps dengan dokumentasi Power Pages.

Baik rekaman langkah formulir dasar maupun formulir multilangkah berisi sebuah bidang yang bernama JavaScript Kustom yang dapat digunakan untuk menyimpan kode JavaScript untuk memungkinkan Anda untuk memperpanjang atau mengubah tampilan visual formulir atau fungsi.

Blok kustom JavaScript akan ditambahkan ke dasar halaman tepat sebelum menutup elemen tag formulir.

Bidang formulir

ID input HTML dari bidang tabel yang diatur untuk nama Logis atribut. Memilih bidang, menetapkan nilai, atau manipulasi sisi klien lain mudah dilakukan dengan jQuery.

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

Penting

Menambahkan kolom pilihan ke formulir berdasarkan model yang akan digunakan pada langkah Formulir multilangkah atau formulir dasar akan muncul pada halaman portal sebagai kontrol server tarik-turun. Menggunakan JavaScript kustom untuk menambahkan nilai tambahan ke kontrol akan mengakibatkan pesan "postback atau argument panggilan balik tidak valid" pada pengiriman halaman.

Validasi bidang sisi Klien tambahan

Kadang-kadang Anda mungkin perlu untuk menyesuaikan validasi bidang pada formulir. Contoh ini memaksa pengguna untuk menyebutkan email hanya jika bidang lain untuk metode kontak yang disukai diatur ke Email.

Catatan

Validasi bidang sisi klien tidak didukung di subkisi.

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

Validasi Umum

Di klik tombol berikutnya/kirimkan fungsi bernama entityFormClientValidate dijalankan. Anda dapat meningkatkan metode ini untuk menambahkan logika validasi kustom.

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

Baca juga