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>

日本語化とか・・・・


<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>

使い方

英語版なので郵便番号、電話番号などは、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>

JS


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

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>

JS


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

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>

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');
		});
	});

各種の自作...


	半角英数字のみ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

各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

関連記事