ARIAに対応したjQuery input validation

らら
らら

はじめに

aria-invalidとかaria-liveとか・・面倒・・・

要は...フォームをアクセシビリティに配慮したものにするって・・・話

探してみたら・・下記を発見・・・・

https://github.com/DavideTriso/form-controls

https://github.com/DavideTriso/form-controls/blob/master/documentation/ARIA-VALIDATE.md

上記を落としてdistにある下記を持ってきます。。

aria-validate.js

form-controls.css

デモ画面

https://davidetriso.github.io/form-controls/validation.html

呼び出し・・

<link href="form-controls.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="aria-validate.js"></script>
HTML

日本語化とか・・・・

<script>
$.fn.ariaValidate.defaultRegionSettings = {
	dateFormat: 'ymd', // dmy = dd/mm/yyyy, mdy = mm/dd/yyyy, ymd = yyyy/mm/dd
	dateSeparator: '/', // / or - or .
	timeFormat: '24', //'24' or '12'
	timeSeparator: ':',
	decimalSeparator: ','
};
$.fn.ariaValidate.defaultSuccessMsg = 'OK!';
$.fn.ariaValidate.defaultErrorMsgs = {
	letters: 'この項目には数字を使用できません。',
	onlyLetters: '英字のみを使用できます',
	digits: 'この項目には英字を使用できません。',
	onlyDigits: '数字のみを使用できます',
	int: '数値を入力してください (e.g. 12)',
	float: '小数点付き数値を入力してください (e.g. 12.168 or 16)',
	bool: 'チェックボックスがチェックされていません。',
	date: '有効な日付ではありません',
	time: '有効な時間ではありません',
	minDate: '入力した日付は過去の日付です',
	maxDate: '入力された日付が未来の日付です',
	email: '有効なメールアドレスを入力してください',
	password: 'パスワードは安全ではありません',
	min: '入力した数値が小さすぎます',
	max: '入力した数値が大きすぎます',
	minLength: '入力の長さが短すぎます',
	maxLength: '項目の長さが許可されている最大文字数を超えています',
	required: 'この項目は、必須項目です',
	tokens: 'リストから値を選択してください',
	match: '一致しません',
	customRegex: 'Regex match returned "false"',
	ajax: 'サーバーから応答がありません!',
	ajaxError: 'サーバーエラー'
}
</script>
HTML

使い方

英語版なので郵便番号、電話番号などは、customRegexモードで自作します。

HTMLで使用するクラス名、ID名のcontrolで始まるものは、aria-validate.jsで使用する要素です。

HTML

<div class="control" id="fullname">
	<label class="control__label" for="#fullname">氏名 <span class="control__requiredflag">(必須)</span></label>
	<input type="text" name="fullname" id="#fullname" class="control__field" required/>
	<div class="control__feedbackwrapper">
		<p class="control__feedback control__feedback_bottom control__feedback_valid"></p>
		<p class="control__feedback control__feedback_bottom control__feedback_error"></p>
	</div>
</div>
HTML

JS

$(document).ready(function() {
	$('#fullname').ariaValidate({
		behaviour: [
			{
				event: 'blur',
				main: true,
				validate: {
					required: true
				}
			}
		],
	});
	//その他の入力項目
});
HTML

HTML

郵便番号customRegex使用例 ...

<div class="control" id="zip">
	<label class="control__label" for="#zip">郵便番号 <span class="control__requiredflag">(必須)</span></label>
	<input type="text" name="zip" id="#zip" class="control__field" required/>
	<div class="control__feedbackwrapper">
		<p class="control__feedback control__feedback_bottom control__feedback_valid"></p>
		<p class="control__feedback control__feedback_bottom control__feedback_error"></p>
	</div>
</div>
HTML

JS

$(document).ready(function() {
	$('#zip').ariaValidate({
		errorMsgs: {
			customRegex: '郵便番号が正しくありません'
		},
		behaviour: [{
			event: 'blur',
			validate: {
				customRegex: /^\d{3}-\d{4}$/i,
				required: true
			}
		}],
	});
	//その他の入力項目
});
HTML

HTML

メールアドレスの確認付き...

<div class="control" id="email">
	<label class="control__label" for="#email">メールアドレス <span class="control__requiredflag">(必須)</span></label>
	<input type="email" name="email" id="#email" class="control__field" required/>
	<div class="control__feedbackwrapper">
		<p class="control__feedback control__feedback_bottom control__feedback_valid"></p>
		<p class="control__feedback control__feedback_bottom control__feedback_error"></p>
	</div>
</div>
<div class="control" id="emailrepeat">
	<label class="control__label" for="#emailrepeat">確認メールアドレス <span class="control__requiredflag">(必須)</span></label>
	<input type="email" name="emailrepeat" id="#emailrepeat" class="control__field" required/>
	<div class="control__feedbackwrapper">
		<p class="control__feedback control__feedback_bottom control__feedback_valid"></p>
		<p class="control__feedback control__feedback_bottom control__feedback_error"></p>
	</div>
</div>
HTML

JS

$(document).ready(function() {
	$('#email').ariaValidate({
		successMsg: '入力されたメールアドレスが一致しました。',
		behaviour: [{
				event: 'blur ',
				main: true,
				validate: {
					required: true,
					email: true,
					matchMain: $('#emailrepeat').find('.control__field').first()
				}
			},
			{
				event: 'emailChange', //use custom event
				dirty: true,
				main: true,
				validate: {
					required: true,
					email: true,
					matchMain: $('#emailrepeat').find('.control__field').first()
				}
			}
		],
	});
	$('#emailrepeat').ariaValidate({
		successMsg: '入力されたメールアドレスが一致しました。',
		behaviour: [{
				event: 'blur',
				main: true,
				validate: {
					required: true,
					match: $('#email').find('.control__field').first()
				}
			},
			{
				event: 'emailChange', //use custom event
				main: true,
				dirty: true,
				validate: {
					required: true,
					match: $('#email').find('.control__field').first()
				}
			}
		],
	});
	var email = $('#email').find('.control__field').first();
	var	match = $('#emailrepeat').find('.control__field').first();
	//Trigger custom events
	match.on('blur', function() {
		email.trigger('emailChange');
	});
	email.on('blur', function() {
		match.trigger('emailChange');
	});
});
HTML

各種の自作...

半角英数字のみ3文字以上12文字までとか
customRegex: /^[a-zA-Z0-9]{3,12}$/i
半角英数字とマイナス、アンダーバー有効
customRegex: /^[a-zA-Z0-9\-_]+$/i
カンマ付数値
customRegex: /^(0|[1-9]\d{0,2}(,\d{3})*)$/i
携帯電話
customRegex: /^\d{3}-\d{4}-\d{4}$|^\d{11}$/i
電話番号
customRegex: /^\(?\d{2,5}\)?[-(\.\s]{0,2}\d{1,4}[-)\.\s]{0,2}\d{3,4}$/i
ひらがな
customRegex: /^[\u3040-\u309F|\s]+$/i
カタガナ
customRegex: /^[\u30A0-\u30FF|\s]+$/i
HTML

各CSS

エラー表示はform-controlsのCSSが使われているので下記を参考に

control__feedback_bottomとか。。control__feedback_startbottomとか・・

https://davidetriso.github.io/form-controls/control-types.html

日本語デモ

デモ

さいごに

あとは、。。本家見ると....いけるかも・・

jquery.validationEngine.jsとか比べると設置は面倒ですね・・・

まぁ。このあたりは1度。メールフォーム作ってしまえば・・・使いまわし?!

カスタムするときは・・下記を把握してから・・・・・

https://waic.jp/translations/WCAG-TECHS/ARIA21

関連記事