今日の記事では、Magento 2のフォームバリデーションについて、また、Magentoストアにフォームバリデーションを導入するための最善の方法について学びます。
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.jsvar config = {
config: {
mixins: {
'mage/validation': {
'Vendor_Module/js/validation-mixin': true
}
}
}
}Vendor/Module/view/frontend/web/js/validation-mixin.jsdefine(['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>上記のフィールドとフォームバリデーションを使用すると、結果は以下のようになります：
