formrun guide

formrun guideでは、ユーザーの皆様に役立つTipsやFAQ、ニュース、ユーザーインタビューなどの情報をまとめてお伝えします

バリデーション機能の設定方法

概要

このページでは、 formrun.js を利用したバリデーション機能の設定方法を紹介します。

formrun.jsについては、別ページをご覧ください。

guide.form.run

設定方法

formrun.jsの読み込み

このページの機能を利用する場合には、下記 formrun.js<head>内 で読み込み、 Formタグformrun というクラスを付与する必要があります。

<head>
  ...
  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
<body>
  ...
  <form class="formrun" action="https://form.run/api/v1/r/<フォーム設定ページで指定される値>" method="post">
  ...
  </form>
  ...
</body>

formrun.jsを利用する場合は、以前の sdk.jsとの併用はできません。

バリデーションに関する設定

電話番号バリデーション

タグに data-formrun-type="tel" 属性を指定します。

指定すると入力欄に電話番号のバリデーションを設定します。

電話番号以外の文字を入力された場合エラーになります。

<!-- マークアップ例 -->
<input type="text" name="電話番号" data-formrun-type="tel">
備考
設置可能場所 Inputタグ type="text"

メールアドレスバリデーション

タグに data-formrun-type="email" 属性を指定します。

指定すると入力欄にメールアドレスのバリデーションを設定します。

メールアドレス以外の文字を入力された場合エラーになります。

<!-- マークアップ例 -->
<input type="text" name="メールアドレス" data-formrun-type="email">
備考
設置可能場所 Inputタグ type="text"

必須バリデーション

タグに data-formrun-required 属性を指定します。

指定すると入力フィールドを必須に設定します。

空欄のテキストフィールドや未選択のラジオボタン、チェックボックス、セレクトボックスがエラーになります。

<!-- マークアップ例 -->
<input type="text" name="お名前" data-formrun-required>
備考
設置可能場所 Input, Textarea, Selectタグ

送信ボタンに関する設定

送信中のボタンラベルを変更する

ボタンタグに data-formrun-submitting-text 属性を指定します。

指定するとフォーム送信後にボタンのラベルを変更します。

二重送信を防ぎ、ユーザビリティを向上させる効果があります。

<!-- マークアップ例 -->
<button type="submit" class="btn btn-primary" data-formrun-submitting-text="送信中...">送信</button>
備考
設置可能場所 Buttonタグ

エラー時にボタンラベルを変更する

ボタンタグに data-formrun-error-text 属性を指定します。

フォーム内にエラーがある場合にボタンのラベルを変更します。

送信してからエラーに気づくよりもユーザービリティが高まり、ユーザーの離脱を抑えることができます。

<!-- マークアップ例 -->
<button type="submit" class="btn btn-primary" data-formrun-error-text="未入力の項目があります">送信</button>
備考
設置可能場所 Buttonタグ

エラーの有無による表示切り替えの設定

項目がエラーの場合に要素を表示する

タグに data-formrun-show-if-error=<FieldName> 属性を指定します。

指定すると FieldNameに指定したフィールドがエラーの時に表示されます。

以下の例では、「お名前」というフォールドを未入力にすると「お名前を正しく入力してください」という文字列が表示されます。

<!-- マークアップ例 -->
<input type="text" name="お名前" data-formrun-required>
<div data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>
備考
設置可能場所 Form内の任意のタグ

項目にエラーがない場合に要素を表示する

タグに data-formrun-show-if-success=<FieldName> 属性を指定します。

指定すると FieldNameに指定したフィールドにエラーが無い時に表示されます。

以下の例では、「お名前」というフォールドに文字列を入力すると「ok.png」という画像が表示されます。

<!-- マークアップ例 -->
<input type="text" name="お名前" data-formrun-required>
<img src="ok.png" data-formrun-class-if-success="お名前" />
備考
設置可能場所 Form内の任意のタグ

項目にエラーがある場合にクラスを追加する

タグに data-formrun-class-if-error=<ClassName> 属性を指定します。

指定すると対象のフィールドがエラーの時に指定したクラスClassNameが付与されます。

対象のフィールドが別の要素の場合は data-formrun-target=<FieldName> にて指定します。

<!-- マークアップ例1 (対象のフィールドが自分自身の場合) -->
<input type="text" name="お名前" data-formrun-required data-formrun-class-if-error="has-danger">

<!-- マークアップ例2 (他のフィールドがエラーの時にクラスを付与する場合) -->
<label data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
  <input type="text" name="お名前" data-formrun-required>
</label>
備考
設置可能場所 Form内の任意のタグ

項目にエラーがない場合にクラスを追加する

タグに data-formrun-class-if-success=<ClassName> 属性を指定します。

指定するとフィールドがエラーでない時に指定したクラスClassNameが付与されます。

対象のフィールドが別の要素の場合は data-formrun-target=<FieldName> にて指定します。

<!-- マークアップ例1 (対象のフィールドが自分自身の場合) -->
<input type="text" name="お名前" data-formrun-required data-formrun-class-if-success="has-success">

<!-- マークアップ例2 (他のフィールドがエラーの時にクラスを付与する場合) -->
<label data-formrun-class-if-success="has-success" data-formrun-target="お名前">
  <input type="text" name="お名前" data-formrun-required>
</label>
備考
設置可能場所 Form内の任意のタグ