`内の希望するフォーム要素を`ulp-field`クラスでラップします。同様に、事前に構築されたエラースタイルを使用するために、`ulp-error`クラスを同じ`

`に追加します。`ulp-error-info`要素が存在する場合は、スタイル設定されたエラーメッセージも表示されます。 * `` * `` * `` * `` * `` * `` * `` * `

機能のクライアント側検証フレームワークを使用すると、顧客はHTML属性を使ってユーザー入力を検証し、1つ以上のカスタム検証機能を実行することができます。検証機能はパーシャルに直接含まれているか、ページテンプレートの`<head>`に含まれています。

#### クライアント側検証

クライアント側検証をフォーム要素に追加するには、以下のようにします。

<Accordion title="入力フィールド要素 入力フィールドの事前設定スタイル">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <label for="first-name">First Name</label>
    <input type="text" name="ulp-first-name" id="first-name">
    <div class="ulp-error-info">
      First Name is Required
    </div>
  </div>
  ```
</Accordion>

<Accordion title="要素を選択 選択フィールドの事前設定スタイル">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <label for="preferred-language">Preferred Language</label>
    <select name="ulp-preferred-language" id="preferred-language">
      <option></option>
      <option value="english">English</option>
      <option value="french">French</option>
      <option value="spanish">Spanish</option>
    </select>
    <div class="ulp-error-info">
      Please Select a Language.
    </div>
  </div>
  ```
</Accordion>

<Accordion title="テキスト要素 テキストフィールドの事前設定スタイル">
  ```javascript lines theme={null}
  <div class="ulp-field">
    <label for="comments">Comments</label>
    <textarea type="text" name="ulp-comments" id="comments">

Please provide an answer.

``` ```javascript lines theme={null}

I agree to the Terms of Service

Please agree to the Terms of Service.

``` ```javascript lines theme={null} // Validation Function // Custom Input Field including the validation error HTML

Phone Number

Invalid phone number

``` ```javascript lines theme={null}

Phone Number

Phone number is required

``` * `

`要素の`data-ulp-validation-function`属性を使用して、検証機能を参照します。 * どのDOMイベント上で、検証機能を`

`要素の`data-ulp-validation-event-listeners`属性を使用して実行する必要があるかを宣言します。検証は提出時に自動的に実行されることに注意します。サインアップページでサードパーティのJavaScriptを使用する際は、十分に注意してください。サインアップページは、セキュリティ関連の機密情報を扱うことが多いため、クロスサイトスクリプティング攻撃に対して脆弱です。ユーザーから提供されたデータは、可能な限り、検証してから送信することをお勧めします。パーシャルコンテンツをローカライズするには、[カスタムテキストAPI](/docs/ja-jp/api/management/v2/prompts/put-custom-text-by-language)を使用して、新しいカスタムテキスト変数を定義します。スクリーン/言語の組み合わせごとに定義できるカスタムテキスト変数の数は最大30です。 #### コンテンツをローカライズするカスタムテキストAPIは[こちら](/docs/ja-jp/api/management/v2/prompts/get-custom-text-by-language)から入手でき、各変数は`var-`命名規則に従っています。APIへの呼び出しは、カスタムテキスト変数を追加、更新、または削除するときに、Screen（スクリーン）を指定する必要があります。マークダウンリンクはサポートされており、ユーザーに表示される前にHTML ``要素に変換されます。 ##### カスタムテキスト変数を作成または更新する以下は、利用規約チェックボックスのラベルのテキストの変数を英語とスペイン語で追加するための呼び出し例です。詳細については、Management APIを参照してください。 ```javascript lines theme={null} # PUT /api/v2/prompts/signup-id/custom-text/en { "signup": { "var-tos": "I agree with the [Terms of Service](https://en.example.com/tos)" } } # PUT /api/v2/prompts/signup-id/custom-text/es { "signup": { "var-tos": "Estoy de acuerdo con los [Términos de Servicio](https://es.example.com/tos)" } } ``` カスタムテキスト変数は、`prompts.screen.text`オブジェクトを使用して、パーシャルで参照されます。前のセクションで示した`var-tos`の例に対する参照は、`prompt.screen.texts.varTos`です。Signup ID Prompt,（サインアップIDプロンプト）のパーシャルで前に作成した変数を使用する方法の例については、以下を参照してください。Management APIの`var-tos`変数がパーシャルで`varTos`として参照されることに注意します。 ##### カスタムテキスト変数をパーシャルで使用する ```javascript lines theme={null} # PUT api/v2/prompts/signup/partials { "signup": { "form-content-end": "

" } } ``` カスタムフォーム要素でキャプチャーしたデータはActions（アクション）で使用できます。Auth0では、収集したデータを検証することを推奨します。 #### キャプチャーしたデータを検証して保存するフォームにカスタムの要素を使用する場合は、データをアクションで使用できるように、入力名に`ulp-`プレフィックスを含める必要があります。 Actionはそれぞれ、キャプチャしたデータを`event.request.body`上のオブジェクトとして受け取ります。顧客は、`api.validation.error`関数を使用して、検証エラーを返すことができます。フォームで収集したデータは、保存やレンダリングする前に必ずサニタイズしてください。 * 保存されたデータがすべて[Liquidの{{escape}}ヘルパー関数](https://shopify.github.io/liquid/filters/escape/)を通過していることを確認します * メールテンプレートのデータをレンダリングする際には、Liquid構文を削除します * Webページでデータをレンダリングする際には、HTMLエンティティをエスケープします * データベースにデータを保存する際には、パラメーター化クエリを使用します * クエリ文字列にデータを渡す場合には、たとえば、`{{encodeURI}}`または`{{encodeURIParam}}`を用いてエンコードしますリスクの軽減に関する詳細とデータを安全に保存するベストプラクティスについては、[こちらのチートシート](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)を参照してください。 Actionから、キャプチャーされたデータは外部APIに送信されて検証および保管されるか、`api.user.setUserMetadata`を通じてユーザーの`user_metadata`に保存されます。 * サインアッププロンプトからのデータは、ユーザー登録前トリガーでアクセスできます。検証エラーが返さると、ユーザーは登録できません。 * ログインプロンプトからのデータは、ログイン後トリガーでアクセスできます。検証エラーが返されると、顧客のアプリケーションのエラーページに転送されます。 ```javascript lines theme={null} # Given this code in the signup form #

# Full Name # #

exports.onExecutePreUserRegistration = async (event, api) => { const fullName = event.request.body['ulp-full-name']; if(!fullName) { api.validation.error("invalid_payload", "Missing Name"); return; } api.user.setUserMetadata("fullName", fullName); }; ``` * サインアッププロンプトとログインプロンプトからのデータはどちらもログイン後トリガーでアクセスできます。検証エラーが返されると、顧客のアプリケーションのエラーページに転送されます。フォームで収集したデータは、保存やレンダリングする前に必ずサニタイズしてください。 * 保存されたデータがすべて[Liquidの{{escape}}ヘルパー関数](https://shopify.github.io/liquid/filters/escape/)を通過していることを確認します * メールテンプレートのデータをレンダリングする際には、Liquid構文を削除します * Webページでデータをレンダリングする際には、HTMLエンティティをエスケープします * データベースにデータを保存する際には、パラメーター化クエリを使用します * クエリ文字列にデータを渡す場合には、たとえば、`{{encodeURI}}`または`{{encodeURIParam}}`を用いてエンコードしますリスクの軽減に関する詳細とデータを安全に保存するベストプラクティスについては、[こちらのチートシート](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)を参照してください。 ##### ユーザーメタデータに保存する取得したデータは検証と保管のためにActionから外部APIに送信されるか、`api.user.setUserMetadata`を通してユーザーの`user_metadata`に保存されます。 ```javascript lines theme={null} # Given this code in the signup form #

# Full Name # #