SQLの窓

2016年07月08日


HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる

単純な、メッセージのカスタマイズは以下をご覧下さい
HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述

ここでは、さらに CSS で :invalid と :valid 疑似クラスを使用する事によって、常に色を使ってエラーの状態をユーザに訴えます。

:valid で枠線を緑に指定

エラーが無ければ、この状態になります

:invalid で枠線を赤に指定

この指定によって、ここでは未入力チェックとして required を指定しているフィールドが最初から枠線が赤くなります。

required と pattern で色を変える

まず、CSS で、クラスに required と pattern で別の色を指定します。いずれも、枠線の太さを太くし(IE11 は元々そうなるので正しくコントロールできませんでした)、背景色を別々に設定します。

さらに、oninvalid(FORM 送信時のイベント) で、対応するクラスを追加してやると、required では、背景がピンクになり、pattern では背景がオレンジになります。

リアルタイムに色を変える

このままでは、送信時にしか色が変わらないので、onchange イベントを追加して、oninvalid と同じ内容を追加します。そうすると、入力した内容が変化する毎に色が変わる事になります。

※ いずれも、oninput で $(this).removeClass("required pattern"); が必要です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
input:invalid {
	border: 1px solid red;
}
input.required:invalid {
	border: 2px solid red;
	background-color: pink;
}
input.pattern:invalid {
	border: 2px solid red;
	background-color: orange;
}

input:valid {
  border: 1px solid green;
}
</style>

<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("change", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("input",function(){
			$(this).removeClass("required pattern");
			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>



タグ:jquery HTML5
【JavaScriptの最新記事】
posted by lightbox at 2016-07-08 16:54 | JavaScript | このブログの読者になる | 更新情報をチェックする
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり