- ベストアンサー
Javascriptで入力チェックを自動化
入力フォームを作る際に、作るたびに項目数や必須項目が異なるので、毎回チェックを作るのが面倒になってきました。 そこで、入力フォームのname属性に「＊」や「■」が入っていると自動的に必須項目になるようにJavascriptを汎用的に作ることはできないでしょうか？ JQueryを使ってもいいので、簡単な方法を知っている方、またはそういうサイトを知っている方よろしくお願いします。
- ok-rjak
- お礼率51% (63/122)
- JavaScript
- 回答数7
- ありがとう数2
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＃きすうばんです。 サンプルのHTMLソースの </input> は全部無しね。恥ずかしながら、文法違反でした。
その他の回答 (6)
- babu_baboo
- ベストアンサー率51% (268/525)
＃ぐうすうばんです ごしてきをうけまして、ていせいです。（だそくにではありません ^^;） e.focus (); を setTimeout (function () { e.focus(); }, 333); に。 ＃ほそくをしょうかいすると、やばいそうなので、たりきほんがん！ /^t.+?9$/
お礼
数回にわたるご返答ありがとうございます。 色々とやり方がありそうなので、いただいた回答を参考にテストしてみます。 ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
ついでに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> また、蛇足で、墓穴をほったかも！
- babu_baboo
- ベストアンサー率51% (268/525)
ふぉ～かすあうとするときにちぇっくするのをためしてみた。 <!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)
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>
- babu_baboo
- ベストアンサー率51% (268/525)
- yyr446
- ベストアンサー率65% (870/1330)
Javascriptで入力チェックしても、Javascriptが有効で無いブラウザーは意味が無いのでサーバー側でもチェックが必要なのは、おいといて、 name属性に「＊」や「■」を入れるくらいなら、入力必須項目にはcalass属性で、 class = "required" をつけておけば、 jQueryなら $(".required") で一気に全部拾えるし、最近のブラウザーなら document.querySelectorAll(".required"); でノードリストとの配列としても全部拾えます。ただし死んだノードリストです。 （動的に追加・削除された要素だと拾い損ねるので、サブミット直前に拾う。） それもつかえないなら、 フォームの elementsプロパティ(HTMLCollection)を順に見ていって、class = "required"ならチェックするというロジックにすればよろしかろう。
お礼
数回にわたるご返答ありがとうございます。 色々とやり方がありそうなので、いただいた回答を参考にテストしてみます。 ありがとうございました。