02 June 2021 / Published in TechBlogs

Magentoのフォームバリデーションについて

今日の記事では、Magento 2のフォームバリデーションについて、また、Magentoストアにフォームバリデーションを導入するための最善の方法について学びます。

1. フォーム認証モジュール
2. フォーム検証ルール
3. 方法
4. 事例

1. フォーム認証モジュール

Magentoでは、jQuery検証をベースにして拡張したフォーム検証用の3つの主要モジュールがあります。

/lib/web/jquery/jquery.validate.js:ベースとなるjQueryバリデーション
/lib/web/mage/validation.js: には、基本的なjQuery検証機能と、カスタム検証ルールを追加するために使用できる$.validator.addMethodなどの追加機能が含まれています。
/lib/web/mage/validation/validation.js: mage/validation.jsをインクルードして、バリデータにいくつかのルールを追加しています。

2. フォーム検証ルール

デフォルトでは、Magento で利用可能なルールは /validation/rules.js に格納されています。しかし、使用できるルールはそれだけではありません。フォームバリデーションの主要モジュールは jQuery をベースにしているので、jQuery の組み込みバリデーションメソッドを使用することができます。

3. 方法

3.1 カスタムルールの作成

前述のとおり、カスタムルールを作成するには、mage/validationモジュール用のJavaScriptミキシンを作成し、$.validator.addMethod

$.validator.addMethod(
  'rule-name',
  function(value, element) {
    // Return true or false after validation rule check
  },
  $.mage.__('Error message to display if validation fails')
)

そして、次のコードは、入力フィールドが5つの単語しかないかどうかをチェックする検証ルールを追加します。

Vendor/Module/view/frontend/requirejs-config.js

var config = {
  config: {
    mixins: {
      'mage/validation': {
        'Vendor_Module/js/validation-mixin': true
      }
    }
  }
}

Vendor/Module/view/frontend/web/js/validation-mixin.js

define(['jquery'], function($) {
  'use strict';

  return function() {
    $.validator.addMethod(
      'validate-five-words',
      function(value, element) {
        return value.split(' ').length == 5;
      },
      $.mage.__('Please enter exactly five words')
    )
  }
});

3.2 既存の検証メッセージの修正

メッセージオブジェクトは、検証ルールを変更せずに既存の検証メッセージだけを変更する必要がある場合に便利なオブジェクトです。

$('#form-to-validate').mage('validation', {
    messages: {
        'input-name': {
            'validation-rule-1': 'Validation message 1',
            'validation-rule-2': 'Validation message 2',
        },
    }
});

input-nameはオブジェクトのキーで、その値は検証ルールのリストです。これらの検証ルールは、その値として検証メッセージを持っており、自分の好みに合わせて自由に変更することができます。

3.3 カスタムフォームバリデーションの制作

mage/validationライブラリを使うと、サーバーに送信する前にカスタムフォームバリデーションを作成することができます。

ステップ1: バリデーションの開始

フォームのバリデーションを行うには、2つの方法があります:

data-mage-init属性の使用:

<form id="my-form" data-mage-init='{"validation": {}}'>
    ...
</form>

text/x-magento-init スクリプトタイプタグの使用:

<script type="text/x-magento-init">
    {
        "#my-form": {
            "validation": {}
        }
    }
</script>

ステップ2: フォームフィールドの検証ルールの定義

Magentoでは様々な方法でフォーム検証ルールを定義することができます。

属性として

<input id="field-1" ... required="true"/>

引数を持つ属性として

<input id="field-1" ... required="true" minlength="15"/>

クラス名として

<input id="field-1" ... class="input-text required-entry"/>

引数付きのクラス名として

<input id="field-1" ... class="input-text required-entry" minlength="15"/>

data-validate属性として

<input id="field-1" ... data-validate='{"required":true}'/>

引数付きのdata-validate属性として

<input id="field-1" ... data-validate='{"required":true, "minlength":10}'/>

data-mage-init使用

<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true}}}}'>
    ...
</form>

引数付きのdata-mage-initの使用

<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true, "minlength":20}}}}'>
    ...
</form>

4. 事例

ここでは、フォームフィールドと、それぞれのフィールドに異なる検証方法を用いた検証フォームを作成してみます。

<form class="form" id="my-form" method="post" data-mage-init='{"validation":{"rules": {"field-4": {"required":true}}}}'>
    <fieldset class="fieldset">
        <div class="field name required">
            <label class="label" for="field-1"><span>Field 1 (using data-validate)</span></label>
            <div class="control">
                <input name="field-1" id="field-1" title="Field 1" value=""  class="input-text" type="text" data-validate='{"required":true, "url": true}'/>
            </div>
        </div>
        <div class="field name required">
            <label class="label" for="field-2"><span>Field 2 (using attribute)</span></label>
            <div class="control">
                <input name="field-2" id="field-2" title="Field 2" value="" class="input-text" type="text" required="true"/>
            </div>
        </div>
        <div class="field name required">
            <label class="label" for="field-3"><span>Field 3 (using classname)</span></label>
            <div class="control">
                <input name="field-3" id="field-3" title="Field 3" value="" type="text" class="input-text required-entry"/>
            </div>
        </div>
        <div class="field name required">
            <label class="label" for="field-4"><span>Field 4 (using data-mage-init)</span></label>
            <div class="control">
                <input name="field-4" id="field-4" title="Field 4" value="" class="input-text" type="text"/>
            </div>
        </div>
    </fieldset>
    <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" title="Submit" class="action submit primary">
                <span>Submit</span>
            </button>
        </div>
    </div>
</form>

上記のフィールドとフォームバリデーションを使用すると、結果は以下のようになります：

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

お問い合わせ

►►►サービスについて

Magento, Sitecore, Shopify Plus, BigCommerce, Amazon Marketplace