HTML5バリデーションの覚書

HTML5のバリデーションを検知

ソースコード

	<script>
	function validation_check(slt){

		var elm = $('#' + slt);
		var title = elm.attr('title');
		
		try{

			var valid=elm[0].checkValidity();
			
			if(valid == true){
				alert('正常です');

			}else{
				alert(valid + '  ' + title);

			}

		}catch( e ){
			
			throw e;
		}
	}
	</script>


	<input type="text" id="test1"  pattern="^[0-9]+$" title="数値で入力してください" value="あ">
	<input type="button" value="TEST1" onclick="validation_check('test1')" class="btn btn-primary" />
	
	

		<form>
			<div id="errorMessage"></div>
			<input type="text" id="neko" name="neko" pattern="^[ァ-ンー]+$" title="カタカナ入力デス" value="あ" placeholder="カタカナ"><br>
			<input type="text" id="yagi" name="yagi" pattern="^[0-9]+$" title="数値（自然数）のみ" value="" placeholder="自然数"><br>
			<br><br>
		
		  	<input type="submit" value="サブミットでバリデーションを検知する"><br>
		  	<input type="button" value="サブミットせずバリデーションを検知する" onclick="testValidByHtml5()" /><br>
		</form>
		

		function testValidByHtml5(){
			var errMsg=validByHtml5();
			if(errMsg!=null){
				alert(errMsg);
			}else{
				alert('正常');
			}
		}
		
		/**
		* HTML5・pattern属性のバリデーションを検知し、title属性で指定したメッセージを表示する。
		* IE9ではpatternが使えないのでエラーを検知できない。
		* @return 正常:null,   異常:エラーメッセージ（title属性の文字列）
		*/
		function validByHtml5(){
			var form = document.forms[0];
			for (i in form) {
				try{
					var v=form[i].validity.valid;
					if(v==false){
						var errMsg = form[i].title;
						return errMsg;
					}
				}catch( e ){
				}
			}
			return null;
		}		
		

	<form>
	  <input type="text" id="test_a" name="test_a" pattern="^[ァ-ンー]+$" title="カタカナで入力でス" value="あ">
	  <input type="button" value="入力チェックA" onclick="valid_func_a()" />

	  <input type="submit" value="サブミット">
	</form>
			

		function valid_func_a(){
	
			var form = document.forms[0];
			var name=form.test_a.name;
	
	
	
			try{
				var valid=form.test_a.validity.valid;
				var title = form.test_a.title;
				if(valid == true){
					alert(name + ' ' + valid + '  ' + '正常です。');
				}else{
					alert(name + ' ' + valid + '  ' + title);
				}
	
			}catch( e ){
				alert('未対応です');
			}
	
		}
			

必須入力のバリデーション

	<input type="text" id="test2"  required title="必須入力です。" value="">
	

最大文字数の制限

	<input type="text" id="test3"  required maxlength="4"  title="4文字以内の必須入力です。" value="">
	

半角英数字のバリデーション

	<input type="text" id="test4" pattern="^[0-9A-Za-z]+$" title="半角英数字で入力してください。" value="abc123XYZ">
	

半角英数字 + 一部記号のバリデーション | ついでに文字数制限も

	<input type="text" name="animal_name"  value="" required pattern="^[0-9A-Za-z!-_@]{1,50}$" maxlength="50" title="50文字以内の半角英数字入力してください" />	
	

日付のバリデーション

	<input type="text" id="test5" pattern="[0-9]{4}(-|/)[0-9]{1,2}(-|/)[0-9]{1,2}" title="日付(Y-m-d)を入力してください。(例 2012-12-12)" value="2016-10-17">
	

日時のバリデーション

	<input type="text" id="test6" pattern="[0-9]{4}(-|/)[0-9]{1,2}(-|/)[0-9]{1,2} [0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2}" title="日時（Y-m-d H:i:s)を入力してください。(例  2012-12-12 12:12:12)" value="2016-10-17 10:16:33">
	

浮動小数のバリデーション

• 123.4
• 0.123
• +0.123
• -0.123
• 1.4E+10
• 1.4E-10

	<input type="text" id="test7" pattern="[+-]?[0-9]+[\.]?[0-9]*([eE][+-])?[0-9]*" title="数値を入力してください。" value="-0.12">
	

パスワードのバリデーション | password

	<input type="password" value="" pattern="^[0-9A-Za-z]{8,24}" required  maxlength="24"  class="valid form-control" title="8～24文字の半角英数字で入力してください。" />
	

		let err_msg = '';
		if(!$('#old_pw')[0].checkValidity()){
			err_msg = 'パスワードは8～24文字の半角英数字で入力してください。';
		}
	

8文字以上且つ空入力可能

	<input type="text" id="pw1" value="" pattern="^[0-9A-Za-z]{8,24}" value=""  maxlength="24"  class="valid form-control" title="8～24文字の半角英数字で入力してください。" />
	

		let err_msg = 'エラーなし';
		if(!$('#pw1')[0].checkValidity()){
			err_msg = 'パスワードは8～24文字の半角英数字で入力してください。';
		}
		$('#res').html(err_msg);
	

XXX