HTML5のrequiredについて質問があります。
以前も質問させていただいたのですが解決できなかったのでもう少しまとめてもう一度質問させていただきます。
初心者なのでよろしくお願いします。
現状tableのtd要素をクリックするとinputに変更してtd要素の中身を書き換える機能を実装したくてその際にそのinputからフォーカスが外れたらHTML5のrequiredの「必須です」みたいな吹き出しが出るようにしたいのですがどういう風に実装すればいいのかわからず詰まっています。
昨日、今日と悩んでいるのですが解決できません。
下記のコードをどのように書き換えたらいいのかご教授いただければ助かります。
よろしくおねがいします。
実際に下記のコードのような記述をしているのですが吹き出しが出てくれなくて困っています。
分かりにくい文章で申し訳ありません。
js
1$(function($){ 2 $('.hensyu').click(function(){ 3 if(!$(this).hasClass('on')){ 4 $(this).addClass('on'); 5 var txt = $(this).text(); 6 $(this).html('<input id="valida" name="inputreq" class="form-control" type="text" value="'+txt+'" required />'); 7 var valitest = document.getElementById("valida"); 8 $('.hensyu > input').focus().blur(function(){ 9 var checkvali = document.formreq.inputreq.checkValidity(); 10 11 if(!checkvali){ 12 if (!valitest.validity.valid) { 13 console.log('aasdad'); 14 valitest.setCustomValidity('必須です'); 15 }else{ 16 valitest.setCustomValidity(''); 17 } 18 19 } 20 var inputVal = $(this).val(); 21 if(inputVal===''){ 22 inputVal = ''; 23 }; 24 $(this).parent().removeClass('on').text(inputVal); 25 26 }); 27 }; 28 }); 29});
HTML
1<form method="post" name="formreq" action="edit"> 2 3<table id="foo-table"> 4 <thead> 5 6 7 <tr> 8 <th>ID</th> 9 <th>会社名</th> 10 <th>社員名</th> 11 <th>社員かな名</th> 12 <th>性別</th> 13 <th></th> 14 </tr> 15 </thead> 16 <tbody id="addgyou"> 17 18 19 <tr> 20 <td>1</td> 21 <td class="hensyu">テスト会社</td> 22 <td class="hensyu">てすと太郎</td> 23 <td class="hensyu">テストタロウ</td> 24 <td class="hensyu">男</td> 25 <td><button type="submit" id="tdatai" title="編集">編集</button></td> 26 </tr> 27 28 </tbody> 29</table> 30 31</form>
回答2件
あなたの回答
tips
プレビュー