JavaScriptで入力チェックを実装する方法とは？
- JavaScriptを使って入力チェックを実装する方法について説明します。入力がされている場合には○を表示させる方法などについても解説します。
- 入力チェックを行うためにはJavaScriptを使用することがあります。特定の条件を満たさない場合にはメッセージを表示するなどの方法があります。
- また、DBを使用している場合には、入力チェックの結果を保存しておくことで、ページを更新しても○が消えないようにすることができます。
- ベストアンサー
JavaScriptで入力チェック
////サンプル//// <p><input type="text" value="" name="box_1" /></p> <p><input type="text" value="" name="box_2" /></p> <p><input type="text" value="" name="box_3" /></p> <p><input type="text" value="" name="box_4" /></p> Javascripｔで入力チェックをして 入力がされていたらpタグとinputタグの間に「○」を表示させたいのですが どのように実装したら良いでしょうか？ ・inputタグは4つだけではなくたくさんあります ・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>
お礼
ありがとうございます！
関連するQ&A
- ボタンを押すとテキストボックスが増えるJavaScriptについて教えてください
Javascriptで質問です。 <input type="text" name="hoge1" value=""> <input type="text" name="hoge2" value=""> <input type="text" name="hoge3" value=""> というようなテキストボックスがあり、「追加」というボタンを押すと 新たなテキストボックス <input type="text" name="hoge4" value=""> が追加されるようなJavascriptを作成したいと考えています。 新たに作られたテキストボックスには name="hoge4" name="hoge5" ・ ・ ・ というように、nameの部分に「hogeの右にある番号に1ずつ加算された名前」を付けていきたいのです。 検索すると、テキストボックスを追加していくだけのサンプルはいくつかあったのですが、nameの部分を加算していく、という例が無くて行き詰っています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript
ある文字を入力して、文字を返すロジックですが、 ボックスを作成して入力を行いたいです。 以下のロジックだと、hogeのvalueに文字を入力すると、文字はボックスに返されますが、 valueをスペースにして、value="" htmlで画面上で、文字を入力して、submitを実行しても、文字は返されません。 文字が引き渡されたないのが原因だと思われますが、 submitでどのようにして文字を引き渡してよいか、教えて頂けないでしょうか。 宜しくお願いします。 <form id="sample"> <input type="text" id="hoge" name="hoge" value="pass" size="30"> <input type="text" id="foo" name="foo" value="" size="100"> <INPUT type="submit" value="変換"> <script language="javascript"> (function () { function test(p){var 省略 charAt(i);}return s;} var elements = document.getElementById('sample').elements; elements['foo'].value = test(elements['hoge'].value); }()); </script>
- ベストアンサー
- JavaScript
- フォーカスが外れた時の入力チェックの仕方
htmlで書かれたテキストエリアのフォーカスが外れた時に、 入力チェックを行いたいのですが すでに <input type=text name=abc value=""> というinputタグが存在していて このタグに手を加えずjavascriptを使い どうにかテキストエリアabcのフォーカスが外れた時に、 入力チェックを行いたいです 要するに htmlで<input type=text name=abc value="" onblur="関数名"> っと書く事が出来ないという状況です。 全く案が思い浮かびません 何かいい案がおありでしたらよろしくお願い致します
- 締切済み
- JavaScript
- 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip
選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 （参考にしていたサイトがあるのですが、忘れてしまいました・・・。） $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- PHP更新フォーム チェックボックス
入力フォームにて、チェックボックスがあり、チェック送信すると"済"という文字をDBに格納します。 <input type='checkbox' name='check' value='済'> DBに済が格納されていたら、更新フォームのチェックボックスに、チェックが入ってる状態に したのですが、どのようにしたら良いでしょうか？ <input type="text" name="checkbox" value="<?php print( $row->checkbox); ?>"> のようにしてもうまくいきません。 ご教授おねがいします。
- 締切済み
- PHP
- Javascriptの入力チェック、日本語について
Javascriptの入力チェックをホームページ内に使いたいのですが、 ●住所（都道府県） ●中学校・高校 のようにnameに「（）」や「・」がある文字を設定するとエラーになってしまい入力チェックできません。 ■エラーになる例 if(document.f.住所（都道府県）.value=="") { errormsg+="住所（都道府県）を入力してください。\n"; } if(document.f.中学校・高校.value=="") { errormsg+="中学校・高校を入力してください。\n"; } HTMLは以下のようにしています。 <input type="text" name="住所（都道府県）"> <input type="text" name="中学校・高校"> nameに日本語を使う場合、どのようにしたら入力チェックができるのでしょうか。 どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- checkbox の入力チェックのやり方について
お世話になります。 フォームにて、 javascriptで、入力チェックをおこないたいと思っています。 チェックボックスについては、どれか選択が一つでもなければ、アラートで、文字を出したいと思いますが、うまくできません。 チェックボックスの入力確認の方法を教えてください。 よろしくお願いいたします。 現在作りかけのソースは、下記の通りです。 <html> <head><title>-</title></head> <body> <form method="post" action="" onsubmit="return form_Validator(this)"> <input type="text" name="a1" size="15" maxlength="12"> <BR> <input type="checkbox" name="a1001" value="1"> <input type="checkbox" name="a1002" value="1"> <input type="submit" value="登録" name="submit"> </form> <script Language="JavaScript"> <!-- function form_Validator(doc) { if ( doc.a1.value == "" ) { alert( "BAD" ); return false; } /* a1001かa1002のチェックボックスのチェックがなければアラート----*/ return (true); } //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- フォームのチェックボックスの入力チェック JavaScriptの添削依
フォームのチェックボックスの入力チェック JavaScriptの添削依頼 フォーム制作しています。 複数選択可能なチェックボックスの入力チェックを行いたいのですが、 動かず困っています。 JavaScriptの添削をお願いします。 他のチェック項目との兼ね合いもあり、 JavaScriptはform.jsに記載したいこと、 チェックボックスが未選択の場合は、flag に 1 を入れること、 チェックボックスの数が多いため、それぞれ違う name を振る方法は避けたいこと、 が制作の条件になっています。 ■index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <html> <head> <!-- *** javascript *** --> <script src="form.js" type="text/javascript" charset="utf-8"></script> </head> <body bgcolor="#ffffff"> フォームの入力で未入力のチェックを行います。 <form method="post" onSubmit="return chkform()" name="form1"> <input type="checkbox" name="chk[]" value="OK">OK <input type="checkbox" name="chk[]" value="NG">NG <input type="checkbox" name="chk[]" value="GOOD">GOOD <br> <br> <input type=submit value=" 送信 "> <input type=reset value=" 取消 "> </form> </body> </html> ■form.js function chkform() { var flag = 1; var list=document.getElementsByName(chk); for(var i=0;i<list.length;i++){ if(list[i].checked){ flag = 0; break; } } if(flag == 1){ window.alert('チェックボックスが未選択です'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else { return true ; } }
- ベストアンサー
- JavaScript
- 複数の入力欄についての入力チェック
JAVAScriptを勉強し始めたものです。 よろしくお願いします。 1つのページに複数のフォームと入力欄があります。 それぞれの入力欄は数字を入力することになっていて、その数字が１～９０の間にあるかどうかをチェックしたいと考えています。 下記のようなページを見ると、一つ一つの入力欄について、IF文でチェックしているのですが、一括してチェックするようなことは可能ですか？ http://www.tagindex.com/javascript/form/check1.html －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 【以下に、やりたいことの例を示します】 <script type="text/javascript"> <!-- function matchNum() { n=eval(document.myFORM1.myTEXT1.value); // ←この行の「myFORM1」と「myTEXT1」をすべてを網羅するように書き換えられないか？ if ( n < 1 || n > 90 ) { alert("入力できるのは、1～90の値です。"); } } // --> </script> <FORM METHOD="GET" name="myFORM1"> <INPUT TYPE="text" NAME="myTEXT1" onblur="matchNum()"> <INPUT TYPE="text" NAME="myTEXT2" onblur="matchNum()"> <INPUT TYPE="text" NAME="myTEXT3" onblur="matchNum()"> </FORM> <br> <FORM METHOD="GET" name="myFORM2"> <INPUT TYPE="text" NAME="yourTEXT1" onblur="matchNum()"> <INPUT TYPE="text" NAME="yourTEXT2" onblur="matchNum()"> <INPUT TYPE="text" NAME="yourTEXT3" onblur="matchNum()"> </FORM> <br> <FORM METHOD="GET" name="myFORM3"> <INPUT TYPE="text" NAME="hisTEXT1" onblur="matchNum()"> <INPUT TYPE="text" NAME="hisTEXT2" onblur="matchNum()"> <INPUT TYPE="text" NAME="hisTEXT3" onblur="matchNum()"> </FORM> <br> <FORM METHOD="GET" name="myFORM4"> <INPUT TYPE="text" NAME="herTEXT1" onblur="matchNum()"> <INPUT TYPE="text" NAME="herTEXT2" onblur="matchNum()"> <INPUT TYPE="text" NAME="herTEXT3" onblur="matchNum()"> </FORM>
- ベストアンサー
- JavaScript
- ＣｈｅｃｋＢｏｘの入力チェックについて
CheckBoxの入力チェックについて CheckBoxの数は可変です。 全て未チェックのときにalertを表示したいです。 今はチェックしてもalertが表示されてしまいます。 よろしくお願いします。 <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>チェックボックス入力チェック</title> <SCRIPT TYPE="text/javascript"> <!-- function item_check() { count = 0; for (i=0;i<=document.form1.elements['item[]'][i].length;i++){ if(document.form1.elements['item[]'][i].checked){ count++; } } if(count==0){ alert("項目を選択してください。"); return(false); } return(true); } --> </SCRIPT> </head> <body> <form name="form1" method="POST" action="test.htm" onSubmit="return item_check()"> <p><input type="checkbox" name="item[]" value="1">項目1</p> <p><input type="checkbox" name="item[]" value="2">項目2</p> <p><input type="checkbox" name="item[]" value="3">項目3</p> <p><input type="checkbox" name="item[]" value="4">項目4</p> <p><input type="checkbox" name="item[]" value="5">項目5</p> <input type="submit" name="kakunin" value="確認"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます！