HTML5のrequired

Question

HTML5のrequiredについて質問があります。
以前も質問させていただいたのですが解決できなかったのでもう少しまとめてもう一度質問させていただきます。
初心者なのでよろしくお願いします。

現状tableのtd要素をクリックするとinputに変更してtd要素の中身を書き換える機能を実装したくてその際にそのinputからフォーカスが外れたらHTML5のrequiredの「必須です」みたいな吹き出しが出るようにしたいのですがどういう風に実装すればいいのかわからず詰まっています。

昨日、今日と悩んでいるのですが解決できません。
下記のコードをどのように書き換えたらいいのかご教授いただければ助かります。
よろしくおねがいします。

実際に下記のコードのような記述をしているのですが吹き出しが出てくれなくて困っています。

分かりにくい文章で申し訳ありません。

$(function($){
   $('.hensyu').click(function(){
       if(!$(this).hasClass('on')){
           $(this).addClass('on');
           var txt = $(this).text();
           $(this).html('<input id="valida" name="inputreq"  class="form-control" type="text" value="'+txt+'" required />');
           var valitest = document.getElementById("valida");
           $('.hensyu > input').focus().blur(function(){
                var checkvali = document.formreq.inputreq.checkValidity();

                if(!checkvali){
                    if (!valitest.validity.valid) {
                        console.log('aasdad');
                        valitest.setCustomValidity('必須です');
                    }else{
                        valitest.setCustomValidity('');
                    }

                }
               var inputVal = $(this).val();
               if(inputVal===''){
                   inputVal = '';
               };
               $(this).parent().removeClass('on').text(inputVal);

           });
       };
   });
});

<form method="post" name="formreq" action="edit">

<table id="foo-table">
	<thead>


		<tr>
			<th>ID</th>
			<th>会社名</th>
			<th>社員名</th>
			<th>社員かな名</th>
			<th>性別</th>
			<th></th>
		</tr>
	</thead>
	<tbody id="addgyou">


		<tr>
			<td>1</td>
			<td class="hensyu">テスト会社</td>
			<td class="hensyu">てすと太郎</td>
			<td class="hensyu">テストタロウ</td>
			<td class="hensyu">男</td>
			<td><button type="submit" id="tdatai" title="編集">編集</button></td>
		</tr>

	</tbody>
</table>

</form>

Comments

[yasutomi]

正しくはJqueryではなくjQueryです。
あとコードブロックのシンタックスハイライトは
```Jquery では機能しないので```jsに修正をお願いします。

[yasutomi]

HTML5のrequiredについての質問なら
HTMLコードも質問に記載するべきです。

[yasutomi]

jQuery(function($){ は
$(function() { と記述をお願いします。
以上が修正されましたら回答します。

[kinisinai]

指摘ありがとうございます。
コードブロック、jQueryのところの間違っていたところ修正しました。
HTMLのコードは今、手元にないのですみません。

[yasutomi]

「実際に下記のコードのような記述をしている」のに
HTMLのコードがないとはどういうことでしょうか。

仮にHTMLのコードがなくても作成することは可能なので
質問への記載をお願いします。

[kinisinai]

実際に下記のコードのような記述とはjQueryのことを指して書いたつもりでした。紛らわしい書き方をして申し訳ありませんでした。

table部分のHTMLのコードの部分を追記したのでよろしくお願いします。

Answer 1

input イベントで入力エラーに合わせて独自のエラーメッセージを設定し、blur イベントで HTMLInputElement.validity.valid をチェックし、false なら setTimeout から HTMLInputElement.reportValidity を呼び出してエラーを表示させると可能だと思います。

$(function($) {
  $('.hensyu').click(function() {
    if (!$(this).hasClass('on')) {
      $(this).addClass('on');
      var txt = $(this).text();
      $(this).html('<input id="valida" name="inputreq" class="form-control" type="text" value="'+txt+'" required />');

      $('.hensyu > input')
        .focus()
        .on('input', function() {
          if (this.validity.valueMissing) {
            this.setCustomValidity('必須です');
          } else {
            this.setCustomValidity('');
          }
        })
        .on('blur', function() {
          if (!this.validity.valid) {
            setTimeout(() => {
              this.reportValidity();
            }, 0);
            return true;
          }

          var inputVal = $(this).val();
          if (inputVal === '') {
            inputVal = '';
          };
          $(this).parent().removeClass('on').text(inputVal);
        })
    };
  });
});

Comments

[kinisinai]

回答ありがとうございます。
さっそく実装して動作確認してみたのですが何も表示されないのですがなぜでしょうか？

グーグルのコンソールログを見ると
「Uncaught TypeError: $(...).focus(...).on is not a function」というエラーが出ています。

[kinisinai]

すみません。僕のミスで見事に僕がやりたかったように実装できました。ありがとうございました。

Answer 2

https://on-ze.com/archives/7310
https://atomiks.github.io/tippyjs/

tippy.jsなどはどうですか？
ｊQueryはなしでも動くみたいです。

Comments

[kinisinai]

答えてくださってありがとうございます。
僕としてはHTML5のrequiredのように必須項目に入力がない場合submitボタンが機能しないようにしたいのですがこちらのものはそのような制御も可能なのでしょうか？

[otolab]

formのonsubmitイベントをListenして、得られるeventオブジェクトのpreventDefault()を実行する感じですね。ブラウザデフォルトの挙動がキャンセルされます。
この辺の使い方はイベントハンドリングの中級問題的なノリがあります。

[kinisinai]

なるほど…。
できればjs、jQueryでどうにかしたいのですがこちらを使うしか方法はない感じでしょうか？

[otolab]

jQueryではないですが、先程書いたのもjsの操作ですよ。tippyも同じくjsのライブラリです。

js...というかDOMやCSSの仕様は、ブラウザのデフォルトの操作すべてをDOM + jsで再現できることを目指して設計されています。大抵のことはできますよ。

[kinisinai]

本当に申し訳ないのですがどのように記述すれば良いかご教授いただくことはできませんか？

[otolab]

未知のことをいくつも同時にやろうとしてるということは自覚すると良いと思います。

formの送信阻害と、ツールチップの表示は別なことです。
また、それらを現状のコードに組み込むこともまた少し違う作業です。

なので、それらを分解してトライしてください。

なお、答えそのものを書くのは好きではないし、やるとして有料になりますｗ
キーワードを拾って検索しつつ、周辺の知識を強化すると良いと思いますよ。ここまでのやりとりを考えると、次また別の何処かで同じように詰まる気がします。

* addEventListener, onsubmit, preventDefault
* tippy.js

あるいは、require属性値を活かすなら、ちょっとテクニックが必要になってくるきはします。
たとえばformをテーブル全体で一つにしていますが、各行で一つにするか、各セルで一つにしないとうまくいかないと思います。

https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation
こういうのも読んでみると全体像がつかめるかもしれません。