• ベストアンサー

Javascriptで入力チェックを自動化

入力フォームを作る際に、作るたびに項目数や必須項目が異なるので、毎回チェックを作るのが面倒になってきました。 そこで、入力フォームのname属性に「＊」や「■」が入っていると自動的に必須項目になるようにJavascriptを汎用的に作ることはできないでしょうか？ JQueryを使ってもいいので、簡単な方法を知っている方、またはそういうサイトを知っている方よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.7

＃きすうばんです。 サンプルのHTMLソースの 　</input> は全部無しね。恥ずかしながら、文法違反でした。

ok-rjak
質問者

お礼

数回にわたるご返答ありがとうございます。 色々とやり方がありそうなので、いただいた回答を参考にテストしてみます。 ありがとうございました。

その他の回答 (6)

回答No.6

＃ぐうすうばんです ごしてきをうけまして、ていせいです。（だそくにではありません ^^;） e.focus (); を setTimeout (function () { e.focus(); }, 333); に。 ＃ほそくをしょうかいすると、やばいそうなので、たりきほんがん！ /^t.+?9$/

ok-rjak
質問者

お礼

数回にわたるご返答ありがとうございます。 色々とやり方がありそうなので、いただいた回答を参考にテストしてみます。 ありがとうございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

ついでにjQueryを使わないサンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>FormCheckSample</title> </head> <body> <form action="#"> <input type="text" name="data1"></input> <input type="text" name="data2" class="required hoge fugarequired"></input> <input type="text" name="data3"></input> <input type="text" name="data2" class="required"></input> <button type="submit">Sub</button> </form> <script type="text/javascript"> 　var forms = document.forms; 　var required_check = function(event){ 　 var flg = true; 　 var target=event?event.target:window.event.srcElement; 　 for(var i=0;i<target.elements.length;i++){ 　　 if (target.elements[i].className.search(/\srequired\s/) != -1) 　　　if(target.elements[i].value == "") flg = false; 　 } 　 if(flg) return true; 　　 else return false; 　} 　for(var i=0;i<document.forms.length;i++) 　 document.forms[i].onsubmit = required_check </script> </body> </html> また、蛇足で、墓穴をほったかも！

回答No.4

ふぉ～かすあうとするときにちぇっくするのをためしてみた。 <!DOCTYPE html> <title></title> <p> <input type="text" value=""> <input type="text" value="123"> <input type="text" value="abc"> </p> <script> (function (geisha) { //@cc_on 　document./*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 　　/*@if (1) 'focusout' @else@*/ 'blur' /*@end@*/, geisha, true); })(function (evt) { 　　var e　= evt./*@if (1) srcElement @else@*/ target /*@end@*/; 　　var mess; 　　 　　if ('INPUT' !== e.nodeName) 　　　return; 　　if ('text' !== e.type) 　　　return; 　　 　　if ('' === e.value) 　　　mess = 'no text'; 　　 　　if (/^\d+$/.test (e.value)) 　　　mess = 'Number'; 　　if (/^[a-zA-Z]+$/.test (e.value)) 　　　mess = 'String'; 　　 　　if (mess) { 　　　alert (mess); 　　　e.focus (); 　　} 　} ); </script>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

HTML5の@requiredサポートしてるブラウザーは、情け無い事に、まだOperaだけなんですよねえ。 http://www.quirksmode.org/html5/compatibility.html そこで、とりあえずjQueryにたよる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>FormCheckSample</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript"> $(function(){ 　$('form').submit(function(){ 　 var flg = true; 　 $('.required',$(this)).each(function(){ 　　 if($(this).val() == "") flg = false; 　 }) 　 if(flg) return true; 　　 else return false; 　}); }) </script> </head> <body> <form action="#"> <input type="text" name="data1"></input> <input type="text" name="data2" class="required"></input> <input type="text" name="data3"></input> <input type="text" name="data4" class="required"></input> <button type="submit">Sub</button> </form> </body> </html>

回答No.2

これからは http://www.html5.jp/tag/elements/input.html#attr-input-pattern

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

Javascriptで入力チェックしても、Javascriptが有効で無いブラウザーは意味が無いのでサーバー側でもチェックが必要なのは、おいといて、 　name属性に「＊」や「■」を入れるくらいなら、入力必須項目にはcalass属性で、 　class = "required" をつけておけば、 jQueryなら $(".required") で一気に全部拾えるし、最近のブラウザーなら 　document.querySelectorAll(".required"); でノードリストとの配列としても全部拾えます。ただし死んだノードリストです。 （動的に追加・削除された要素だと拾い損ねるので、サブミット直前に拾う。） それもつかえないなら、 フォームの elementsプロパティ(HTMLCollection)を順に見ていって、class = "required"ならチェックするというロジックにすればよろしかろう。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 選択肢によって入力必須が変わるフォームの入力チェック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 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。

  • jqueryで入力チェック

    jqueryで入力チェックをリアルタイムに行いたいです。 入力フォームにフォーカスが当たった際に「必須項目です。」や 「半角でお願いします。」など入力の説明文を表示させ、 もし間違った入力をしたまま、 次の入力項目にフォーカスが当たると前の入力項目に 「この項目は必須です。」や「半角で入力してください。」など エラーメッセージを表示させたいのです。 上記のような事ができるjqueryのプラグインをご存知の方、 いらっしゃいましたら、お手数ですが、お教え頂けますでしょうか？ どうぞ宜しくお願い致します。

  • JavaScriptにて、2つのチェックボックスのチェックができません

    お世話になっております。 お分かりになる方いらっしゃいましたら、ご教授願えますでしょうか？ 現在採用に関する応募フォームを作成しています。 JavaScriptにてフォーム内のチェックボックスに チェックが入っているか、必須チェックをさせたいと思っています。 テキストボックスやコンボボックスなど、いくつか必須チェックがある中で、 チェックボックスの項目についての必須チェックがうまくいきません。 チェック完了後、cgiにてメールを送信するようにしているのですが、 チェックがされず、メールを送信してしまいます。 ローカルで行ってみたのですが、チェックをスルーして、 cgiに遷移してしまいます。 フォームイメージは以下の感じです。 <応募フォーム> --------------------------- 希望勤務地：□本社　□大阪 --------------------------- 2つのチェックボックスどちらにもチェックが入っていない場合は、 エラーメッセージを出し、処理を中止します。 どちらのチェックボックスにもチェックが入っていても、 エラーは出さずにcgiへ遷移します。 以下は現在のコードの内容です。 <HTMLコード> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> <input type="checkbox" name="希望勤務地" value="本社" checked>本社 <input type="checkbox" name="希望勤務地" value="大阪">大阪 <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> <Scriptコード> function check(){ if(!document.応募フォーム.希望勤務地.value.checked){ flag = 1; window.alert('必須項目[希望勤務地]にチェックがされていません'); } } 色々試してみたのですが、うまくいきませんでした。 チェックボックスのnameを同じ名前にしているのが原因でしょうか？ お手数ですが、宜しくお願いいたします。

  • 入力チェックをしたいです。

    結構初心者です。 フォームに入力された内容をチェックしたいので、まず下記のように書きました。 <script Language="JavaScript"> <!-- function submitCheck(){ var flag = 0; // 設定開始（必須にする項目を設定します） if(document.insert.MatterID.value == ""){ flag = 1; } else if(document.insert.name.value == ""){ flag = 1; } else if(document.insert.Correspondencedate.value == ""){ flag = 1; } if(flag){ window.alert('必須項目に未入力があります。'); // チェックされていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } --> </script> で、これにチェックボックスの入力チェックも含めたいのですが、ただ else if(document.insert.bld_ReceiptNo.checked){ flag = 1; } こうするだけではダメなのですね；； どうすればいいかお知恵を拝借できませんでしょうか。

  • 未入力のチェックをするには？

    「とほほのｗｗｗ入門」さんのwwwmailというメールフォームcgiを使わせてもらっています。 このメールフォームに未入力のチェックをさせたいのですが、どうしてもうまくいきません。 例えば「名前」を入力必須項目にしたいので、未入力だった場合、エラーを表示させたいのです。 他のサイトなどを参考に、 #名前がないときの処理 if ($FORM{'NAME'} eq "") { &err('名前が記入されていません。'); } と入れてみたりしたのですが、Internal Server Error がでてしまいます。 また、現在配布されているものと違ったりするようです。 CGIに関してはあまり詳しくなく、本当に簡単な改造をしたことがある程度です。どなたかご存知の方がいらっしゃいましたらぜひ宜しくお願いいたします！

    • ベストアンサー
    • CGI
  • 外部JavaScriptがうまく呼び出せません

    お世話になっております。 お分かりになります方いらっしゃいましたら、 ご教授願えますでしょうか？ 人材を募集する応募フォームを作っています。 応募フォームの項目にはいくつか必須項目があり、 送信ボタンを押した際、必須チェックをJavaScriptで 行いたいと思っています。 チェックする項目が多数あるので、直接htmlファイルには書き込まず、 外部jsに書き出して、htmlファイル上で呼び出す方法をとる事にしました。 htmlに直接書き込んだ際にはうまく動いたので、 JavaScriptの内容が悪いのではないと思うのですが、 送信ボタンを押しても、必須項目がチェックされず、 そのまま項目が空のメールが届いてしまいます。 以下に該当のコードを記入いたしますので、 原因がお分かりになります方、ご教授頂いてもよろしいでしょうか？ ・外部js：oncheck.js ・cgi：send.cgi 【oncheck.js】 <!-- function check(){ ・ (必須項目のチェックを行っています) ・ } //--> 【htmlファイル】 <html> <head> <title>採用情報</title> <script language=JavaScript src="oncheck.js" type=text/javascript> </script> </head> <body> <h3>応募フォーム</h3> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> ・ ・ ・ <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> </form> </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 ; } }

  • フォームの入力チェック

    こんにちは、今回はホームページのワザについて教えて下さい～。 今フォームを作成してアンケートを回答してもらうページを作成中なのですが、そこで躓いてしまいました。 CGIでフォームを作成しているのですが、そのフォームの中の回答で必須項目を作りたいのです。回答していないで送信ボタンを押すとダイヤログが出て「××をご記入ください」のようなメッセージを出す・・・こんなのが理想なのです。 今普通にCGIでフォームだけは完了したのですが、そのチェック機能をjavaでつけても動いてくれないのです（泣）。全くjavaが働かず、普通に送信されてしまいます。 CGIを外してjavaだけでやろうとするとアドレスを予め設定していないという事でエラーになりますし・・・。今は <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.ks.value==""){ alert("必須項目を記入してください。"); return false; } ・ ・ ・ // --> </SCRIPT> </HEAD> <BODY><!--××× CGI　Program--> <FORM action=http://www.CGIのテキストまでのパス.txt method=post　onSubmit="return Check()"><INPUT type=hidden value=××@×× name=sendto><INPUT type=hidden value=/mail/××.htm name=success><!--ここまで--><A name=TOP></A> としてあります・・・。 すみません！どなたかわかる方！ぜひ教えて下さい、お願いいたします！

    • ベストアンサー
    • HTML
  • JavaScriptでフォームの入力項目をリアルタイムでチェックする「

    JavaScriptでフォームの入力項目をリアルタイムでチェックする「jQuery Form Validators」で全角カナや半角数字のみを入力できるようにすることはできますか？ （参考にしたサイト） http://www.skuare.net/test/jvalidator.html フォームの入力項目で以下の入力のチェックが出来るようにしたいのですが可能でしょうか？ ・全角カタカナのみで姓名の入力 ・半角数字のみで電話番号の入力 メールアドレスは、inputタグのサンプルにある部分をコピーすることで出来ました。 --------------------------------------- validExpress="[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" --------------------------------------- validExpress=""の""の中を指定すれば良いのだと思うのですがどうしても解決せず、この場で質問させて頂いてます。 どうかご教授の程、宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する