SQLの窓

2016年07月08日


HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )

このサンプルでは、required 属性と pattern 属性でのエラー結果のメッセージをカスタマイズしています。また、JavaScript のイベント部分の登録には jQuery を使用しています。

validity の下には以下のようなプロパティがあり(Google Chrome 調べ)、個別に対応が可能なようです。
badInput
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
tooShort
typeMismatch
valid
valueMissing
※ 実践しないと詳細は解りませんが、だいたいの意味は MDN で日本語で書かれています。
customError だけは特殊なプロパティのようで、invalid イベントの中で、setCustomValidity を実行して空文字以外を指定していると true になるようです。
しかも、実行順序とか関係無く、記述されていると invalid の中ではそうなっていました
▼ 何もカスタマイズしないで、デフォルトエラー発生後、コンソールで確認したものです。 required 属性の場合は、未入力だと valueMissing になり、pattern の対象外だと、patternMismatch になりました。詳細は未調査ですが、思ったような対応はおそらく可能だと思います。 ▼ 参考にした Stack Overflow HTML5 form required attribute. Set custom validation message? Stack Overflow でも書かれていますが、oninput での処理が重要となります。(そもそも、この手の validate 処理は、業務アプリでは重要になります。やっと、HTML でそれがサポートされるようにはなりましたが、結果的には JavaScript の力を借りる事は避けられないようです。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
			}
		})
		.on("input",function(){
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>
oninput で setCustomValidity("") でカスタムメッセージをクリアしているのは、例えば、required だけメッセージを変更していた場合、setCustomValidity("") でクリアしなければ、pattern のエラーになっているにもかかわらず 『必須入力です』 と表示されてしまいます。

そこで、setCustomValidity("") でクリアだけ実行すると、 『必須入力です』 というメッセージが表示されている状態のままで数字以外を入力すると、 『デフォルトのpattern のエラーメッセージ』 が表示されますい。これが、required のカスタマイズだけなら正しいのですが、pattern のメッセージもカスタマイズしている場合に新しいメッセージに切り替わりません。

そこで、いったんフォーカスを外して現在の表示をキャンセルして setCustomValidity("") でカスタムメッセージをクリアして、フォーカスを戻すという処理を行っています
textarea で pattern 属性は使用できません ( MDN のドキュメント ) 関連する記事 HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
タグ:jquery HTML5
【JavaScriptの最新記事】
posted by lightbox at 2016-07-08 13:39 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり