- ベストアンサー
JavaScriptで入力チェックを実装する方法とは？
- JavaScriptを使って入力チェックを実装する方法について説明します。入力がされている場合には○を表示させる方法などについても解説します。
- 入力チェックを行うためにはJavaScriptを使用することがあります。特定の条件を満たさない場合にはメッセージを表示するなどの方法があります。
- また、DBを使用している場合には、入力チェックの結果を保存しておくことで、ページを更新しても○が消えないようにすることができます。
- hinananana
- お礼率57% (11/19)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たとえばこんな感じでどうでしょうか？ <script> window.onload=function(){check()} try{ document.addEventListener('keyup',function(e){keyupfunc(e)},true); }catch(e){ document.attachEvent('onkeyup',function(e){keyupfunc(e)}); } function keyupfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="INPUT" ){ check(); } } function check(){ var n=document.getElementsByTagName("input"); for(var i=0;i<n.length;i++){ if(n[i].type=="text"){ if(n[i].previousSibling != null && n[i].previousSibling.nodeValue=="○" && n[i].value==""){ n[i].parentNode.removeChild(n[i].previousSibling); }else if((n[i].previousSibling == null || n[i].previousSibling.nodeValue!="○") && n[i].value!=""){ n[i].parentNode.insertBefore(document.createTextNode("○"),n[i]); } } } } </script> <p>○<input type="text" value="1" name="box_1" /></p> <p>○<input type="text" value="" name="box_2" /></p> <p><input type="text" value="2" name="box_3" /></p> <p><input type="text" value="" name="box_4" /></p> ※box_2は○がついているけどvalueが空、box_3は○がついていないけどvalueに値 ロード時やinputになにか入力をしたときにcheck()を走らせる マウスだけの操作での反応も拾うならclickやblurのチェックも有効ですが あまりやりすぎると無駄が多くなるので注意
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
うごく ぶらうざがが かぎられるかな？ <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> p > label { float: left; } input[type="text"]:valid + label:before { content: "○"; } input[type="text"]:invalid + label:before { content: "必"; } </style> <body> <form> <p><input type="text" name="b1" value="" required><label> </label></p> <p><input type="text" name="b2" value="" required><label> </label></p> </form>
お礼
ありがとうございます！
お礼
ありがとうございます！