HTML5のrequiredについて

Question

HTML5のrequiredはsubmitが押された時に発生すると調べた結果わかったのですがsubmitではなく入力チェックを行いたいinputからフォーカスが外れた時に入力なしならチェックしたいのですが可能でしょうか？

<追記>
下記のようコードでテーブルをクリックしたら編集可能になるものを作成しているのですがその際に編集された場所が空ならrequiredを使ってフォーカスが離れたときに「必須です」みたいなのが出るように実装したのですがどうすればよいでしょうか？

<script>
	jQuery(function($) {
		$('.tete').click(function() {
			//classでonを持っているかチェック
			if (!$(this).hasClass('on')) {
				//編集可能時はclassでonをつける
				$(this).addClass('on');
				var txt = $(this).text();
				//テキストをinputのvalueに入れてで置き換え
				$(this).html('<input type="text" value="'+txt+'" required="required"/>');
				//同時にinputにフォーカスをする
				$('.tete > input').focus().blur(function() {
					var inputVal = $(this).val();
					//もし空欄だったら空欄にする前の内容に戻す
					if (inputVal === '') {
						inputVal = '';
					}
					;
					//編集が終わったらtextで置き換える
					$(this).parent().removeClass('on').text(inputVal);
				});
			}
			;
		});
	});
</script>

Comments

[m.ts10806]

「可能です」だけで良いでしょうか。

[m.ts10806]

PHP,Laravelはどのように本件に関係するのでしょうか。
むしろJavaScriptでは

[kinisinai]

PHP、laravel は使用していたので追加しました。
コードの方追加したのでもしよろしければどのようにすれば良いかご教授いただけると幸いです

[m.ts10806]

現在の内容とは無関係なのでタグはずしてください

[kinisinai]

すみません。外させていただきました。

Answer 1

checkValidity() を呼び出せば、任意のタイミングでバリデーションする事が出来ます。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation#The_HTML5_constraint_validation_API
https://www.google.com/search?q=checkValidity

required属性に限らず、HTML Standardで用意された全てのフォームバリデーションが働く便利なメソッドです。

Re: obake_さん

Comments

[kinisinai]

checkValidity()で使うとtrueかfalseで帰ってきますよね？
それでどうやってrequiredの「必須です」みたいなのを表示させるのでしょうか？

[think49]

https://teratail.com/questions/27111 に書いた内容を意図していました。

Answer 2

可能です……だけでは字数制限にかかるので例

document.addEventListener('focusout', function(event) {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'input') {
    return true;
  }

  if (!target.checkValidity()) {
    console.log(target, 'invalid');
  }

  return true;
}, false);

Comments

[kinisinai]

ありがとうございます！
まだ試せる環境にいないため明日以降試して僕にも実装できたらベストアンサーにさせていただきます！

Answer 3

ブラウザに依存しますね
firefoxあたりだと一度入力して値を削除したときにもコーションがでます

どうしてもブラー処理が必要ならjavascriptをかますことです

Comments

[kinisinai]

調べてる時にブラウザ依存の件は出てきましたがやはりそうなりますか…
とりあえず一度実装してから考えてみます！