カスタム JavaScript をフォームに追加

詳細フォーム ステップの記録は、カスタム JavaScript という名前のフィールドを含み、フォームのビジュアル表示または機能を拡張または変更できる JavaScript コード格納するために使用できます。

JavaScript のカスタム ブロックは、ページの下部のクローズ フォーム タグ要素の直前に追加されます。

フォーム フィールド

テーブル フィールドの HTML の入力 ID は、属性の論理名に設定されます。 フィールドの選択や値または他のクライアント側の操作の設置を jQuery で簡単にします。

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

重要

詳細フォームのステップや基本フォームで使用するモデル駆動型フォームに選択の列を追加すると、ポータルページにドロップダウンのサーバーコントロールとして表示されます。 カスタム JavaScript を使用してコントロールに追加の値を追加すると、ページ送信時に「ポストバックまたはコールバックの引数が無効です」というメッセージが表示されます。

追加したクライアント側フィールドの検証

フォーム上で、フィールドの検証を時々カスタマイズする必要があります。 次の例は、カスタム 検証の追加を示します。 この例では、希望の連絡方法の為の他フィールドが電子メールに設置される場合のみ、ユーザーに電子メールを指定させます。

注意

クライアント側のフィールド検証はサブグリッドではサポートされません。

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'>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);
 
         // Wire-up the click event handler of the validation summary link
         $("a[href='#emailaddress1_label']").on("click", function () { scrollToAndFocus('emailaddress1_label','emailaddress1'); });
      });
   }(window.jQuery));
}

全般の検証

次/送信 のボタンを押すと、webFormClientValidate という機能が実行されます。 この方法を拡張して、カスタム検証のロジックを追加できます。

if (window.jQuery) {
   (function ($) {
      if (typeof (webFormClientValidate) != 'undefined') {
         var originalValidationFunction = webFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            webFormClientValidate = 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));
}

関連項目

• ポータルの構成
• 基本フォームの定義
• ポータルの詳細フォーム ステップ
• フォームの読み込みまたはタブの読み込みのステップの種類
• リダイレクト ステップの種類
• 条件付きのステップの種類
• Microsoft Learn: スクリプト使用した Power Apps ポータルの拡張
• Microsoft Learn: 高度なクライアント サイドの開発

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。