- ベストアンサー
エラーチェックの送信について
下記のようなコードでエラーチェックを行い、エラーがなければ送信というシステムを書いています。 しかし、下記のような現象が起きます。 ・エラーチェックをし、エラーメッセージが出力されるが、表示されるダイアログを消すとエラーメッセージも消えてしまう。 これをエラーメッセージを残したままにしたいと考えています。 何卒よろしくお願い致します。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS入力チェックサンプル</title> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script type="text/javascript" src="el_validation.js"></script> <style type="text/css"> .custom_error { background-color:#a00; }} </style> <script> // 初期化 $(document).ready(function(){ $.el_valid.init({ // 各種入力チェック "item01":{"rule":["required"]}, // 複合、チェックタイミングの指定 "item_a0":{"rule":["required","min_length[5]","max_length[10]"]}, // 複数のバリデーション "item_a1":{"rule":["required","url"], "on":"blur"}, // フォーカス移動時のみチェック "item_a2":{"rule":["required","email"], "on":"blur"}, // フォーカス移動時のみチェック "item_a3":{"rule":["required","tel"]}, // フォーカス移動時のみチェック // エラーの出力場所、表示方法変更 "item_b1":{"rule":["required"], "err":"item_b1_error"}, // エラー場所指定 "item_b2":{"rule":["required"], "err_class":"custom_error"}, // エラークラス指定 "item_b3":{"rule":["required"], "err":"item_b3_error", "err_class":"custom_error"} // エラー場所・クラス指定 }); }); // 全バリデーション var return_check = function() { if ($.el_valid.all()) { // 全チェック alert('チェックOK'); } else { alert('入力エラーがあります'); return(false); } } </script> </head> <body> <form method="post" onsubmit="return_cheack"> <table> <tr><td>必須</td><td><input type="text" id="item01"><span id="e_item01"></span></td></tr> <tr><td>必須、5から10文字</td><td><input type="text" id="item_a0"><span id="e_item_a0"></span></td></tr> <tr><td>電話番号（フォーカス移動時のみ）</td><td><input type="text" id="item_a3"><span id="e_item_a3"></span></td></tr> </table> <br> <input type="submit" value="送信" onclick="return_check()"><br><br> <a href="http://ellsif.com/blog/?p=1">blog記事</a> </form> </body> </html>
- kokoko69
- お礼率20% (8/40)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
質問の意味がよくわからないのですが… 「OK」ボタンを押してもダイアログを閉じたくないという意味でしょうか？ alertを用いる以上、そういう仕様でできているので変えるのは無理でしょう。 そのようなことをしたいのであれば、ダイアログを自作すればよいのでは？ jQueryを使用しているようですので、jQueryUIのDialogを利用すれば比較的簡単に実現可能と思います。 ◇サンプル http://jqueryui.com/dialog/#default ◇API ドキュメント http://api.jqueryui.com/dialog/ ＞表示されるダイアログを消すとエラーメッセージも消えてしまう。 ダイアログにメッセージを表示する限り、「ダイアログを消すとメッセージも消える」のは仕方のないことですので、これを避けたければダイアログ以外の部分にメッセージを表示すればよろしいかと思います。 どこがよいのかは質問者のご判断によりますが、現在の表示内容に挿入するとか・・・ http://alphasis.info/jquery-api/manipulation/dom-insertion/
関連するQ&A
- 【緊急】リアルタイムでエラーチェック
下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。 このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>exValidationサンプル 2</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.js"></script> <script type="text/javascript" src="js/exvalidation.js"></script> <script type="text/javascript" src="js/exchecker-ja.js"></script> <script type="text/javascript"> $(function(){ $("form") .exValidation({ rules: { name: "required", kana: "required katakana", email: "required email hankaku group", pass: "required min6 max12", repass: "required retype-pass", radio: "radio", checkbox: "checkbox" }, errInsertPos: 'after', errPosition: 'fixed' }); }); </script> </head> <body> <div class="pagebody"> <h1>exValidation</h1> <form> <fieldset> <p class="attention">*は必須項目です</p> <table> <tbody> <tr> <th>Name<span>*</span></th> <td><input type="text" id="name" name="name" value="" /></td> </tr> <tr> <th>Kana<span>*</span></th> <td><input type="text" id="kana" name="kana" value="" /></td> </tr> <tr> <th>Mail<span>*</span></th> <td><span id="email"><input type="text" id="email" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td> </tr> <tr> <th>Password<span>*</span></th> <td><input type="password" id="pass" name="pass" value="" /></td> </tr> <tr> <th>Retype-Password<span>*</span></th> <td><input type="password" id="repass" name="repass" value="" /></td> </tr> <tr> <th>Sex<span>*</span></th> <td> <span id="radio"> <label for="male"><input type="radio" id="male" name="sex" value="male" />male</label> <label for="female"><input type="radio" id="female" name="sex" value="female" />female</label> </span> </td> </tr> <tr> <th>Prefecture<span>*</span><br /> this is selectable</th> <td> <select id="pref" name="pref" class="selectable"> <optgroup label="---"> <option value="">---</option> </optgroup> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> <optgroup label="東北"> </optgroup> </select> </td> </tr> <tr> <th>City</th> <td><input type="text" name="city" value="" /></td> </tr> <tr> <th>Street</th> <td><input type="text" name="street" value="" /></td> </tr> <tr> <th>Favorite<span>*</span></th> <td> <span id="checkbox"> <label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label> <label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label> <label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label> <label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label> <label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label> </span> </td> </tr> </tbody> </table> </fieldset> <p class="submit"><input type="submit" value="Submit" class="button" /></p> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンとテキストボックスで、ボタン選択時のテキストボックスの入力チェックするにはどうしたらよいでしょうか？
ラジオボタンとテキストボックスの組合わせで使用し、ラジオボタン選択時のテキストボックスの入力チェックをするにはどうしたらよいのでしょうか？ 以下はそのhtmlソースになります。 <table border="0" cellspacing="2" cellpadding="0"> <tr> <td><input type="radio" name="addsearch" value="検索エンジン" id="p1"></td> <td colspan="2"><label for="p1"><span class="stress2">検索エンジン</span></label></td> </tr> <tr> <td></td> <td>検索エンジン名</td> <td><INPUT TYPE=text NAME="addsearch1" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="ご紹介で" id="p2"></td> <td colspan="2"><label for="p2"><span class="stress2">ご紹介で</span></label></td> </tr> <tr> <td></td> <td>ご紹介者のお名前をおしえてください。</td> <td><INPUT TYPE=text NAME="addsearch2" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="広告を見て" id="p3"></td> <td colspan="2"><label for="p3"><span class="stress2">広告を見て</span></label></td> </tr> <tr> <td></td> <td>どこの広告ですか？</td> <td><INPUT TYPE=text NAME="addsearch3" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="その他" id="p4"></td> <td colspan="2"><label for="p4"><span class="stress2">その他</span></label></td> </tr> <tr> <td></td> <td>具体的にお願いします。</td> <td><INPUT TYPE=text NAME="addsearch4" VALUE="" SIZE=40></td> </tr> </table> よろしくおねがいいたします。
- ベストアンサー
- HTML
- [PHP初心者] フォームのエラーチェック
PHPやデータベースに全く疎い者です。 皆様にご指導頂きたく投稿致します。質問内容もレベルが低いですがどうが宜しくお願いします。 メールフォームにてフォームのボタンを押下し、 エラーチェックをして、エラー項目を同一画面上の上の辺りに表示させたいのですが、、参考書を読んだり、過去スレを拝見しても、どうもわかりません。 <body> //↓この辺をどう書けばいいのか、さっぱりなんです。 <?php if(isset($_POST['mailform'])) { if($_POST['name'] == "") { echo("名前を入力して下さい。<br>"); }} ?> //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ <form method="POST" action="kakunin.php"> <table border="0" cellpadding="5"> <tr> <td colspan="2"></td> </tr> <tr> <td>名前</td> <td><input type="text" name="name" size="20"></td> </tr> <tr> <td>メールアドレス</td> <td><input name="mail" type="text" id="mail" size="20"></td> </tr> <tr> <td>項目</td> <td> <input type="checkbox" name="check[]" value="PHP">PHP <input type="checkbox" name="check[]" value="Perl">Perl <input type="checkbox" name="check[]" value="ASP">ASP <input type="checkbox" name="check[]" value="JSP">JSP</td> </tr> <tr> <td>お問い合わせ内容</td> <td><textarea rows="5" name="naiyou" cols="40"></textarea></td> </tr> <tr> <td colspan="2"><input name="mailform" type="submit" id="mailform" value="::入力内容を確認::"> <input type="reset" name="Submit" value="リセット"></td> </tr> </table> </form> </body>
- 締切済み
- PHP
- JavaScript チェックボックスで指定の箇所をチェックする方法
初めての投稿ですが、よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 一覧表の行or列の先頭にあるチェックボックスを選択すると 選択された行or列にあるチェックボックスを全てチェックされ、 先頭のチェックボックスを外すと全て解除される。 (例：横A□チェックボックスを選択すると右にある全てのチェックボックスが選択される。チェックを外すと右にある全てのチェックボックスが未選択になる。) という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦A<br><input type="checkbox" id="" /></td> <td>縦B<br><input type="checkbox" id="" /></td> <td>縦C<br><input type="checkbox" id="" /></td> </tr> <tr> <td>横A<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横B<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横C<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> </table> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- jQuery テキストボックス読み取り解除
標題について、うまく動作しません。 お手数ですが、ご教授願えたらと思っています。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> 仕様：テキストボックスをクリックしたら、読み取り専用が解除される。 ※Ajaxの初期ロード時に各々の項目はreadOnly=true設定 上記が可能なら、その後拡張仕様として、フォーカスアウトした時に 再度 readOnly=trueに設定 html <table> <tr> <td><input type="text" id="code[1]" value="00001"></td> </tr> <tr> <td><input type="text" id="code[2]" value="00002"></td> </tr> <tr> <td><input type="text" id="code[3]" value="00003"></td> </tr> jQuery (function($){ $('input[type="text"]').click(function(){ $(this).attr('readonly','readonly'); }); }); Ajaxの設定は何とかできなのですが、 jQueryの設定がうまくいきません。 どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
- テーブル行のクリックでチェックボックスの制御
テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>
- 締切済み
- JavaScript
- history.backの前に値をクリアしたい
以下のようなソースを作りました。 reccheck.phpで、チェックしてエラーだと、ここに戻ってエラー表示をするのですが、その後に「戻る」を押しても、同じエラーにかかって、画面が移りません。 ここで使っているerr_swの値をクリアすることはできないでしょうか？ <?php $err_sw = $_POST['errsw']; ?> <html><head> <SCRIPT language="JavaScript"> <!-- function msg(sw){ if(sw==3){ alert("エラー"); return false; } return true; } function Check(){ if(document.check.frec.value=="on"){ if(document.check.USER_ID.value==""){ alert("IDを入力"); return false; } if(document.check.USER_PS.value==""){ alert("PW入力"); return false; } return true; } return true; } function Back(){ window.document.check.USER_ID.value = ""; window.history.back(); } // --> </SCRIPT> </head> <body onload="msg(<?echo $err_sw?>)"> <form name="check" action="reccheck.php" method="POST" onSubmit="return Check()"> <input type="hidden" name="OK_URL" value="ok.php"> <input type="hidden" name="ER_URL" value="test.php"> <table><tr> <td>ユーザＩＤ</td> <td><input type="text" name="USER_ID" size="8"></td> </tr><tr> <td>パスワード</td> <td><input type="text" name="USER_PS" size="8"></td> </tr></table> <table><tr> <td><input type="button" value="戻る" class="font12" onclick="return Back()"> </td><td> <input type="submit" value="送信" class="font12">
- 締切済み
- JavaScript
- 画面の２重起動をチェックする方法について
画面の２重起動をチェックする方法について PHPかJavaScriptどちらで実現できるかわかりませんが... 【確認】ボタンを押下で【確認画面】を別画面で表示します。 既に【確認画面】が起動されていたら 【既に表示されています】OR【起動されている画面を前面に表示】など できないかなぁと思っています。 このようなご経験がある方、よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <title>２重起動チェックテスト</title> <script type="text/javascript"> function kogamen_check() { //**************************************************** //ここで確認画面(kakunin.php)が起動済かチェックできないでしょうか？ //**************************************************** } </script> </head> <body> <table align = "center" cellspacing="0"> <form name="form1" action="kakunin.php" method="post" target="_blank" onSubmit="return kogamen_check()"> <tr> <td align="right">項目１</td> <td><input type="text" name="item1" size="10" maxlength="10"><br> </tr> <tr> <td align="right">項目２</td> <td><input type="text" name="item2" size="10" maxlength="10"><br> </tr> <tr> <td><br></td> <td align="center"> <input type="submit" name="kakunin" value="確認"> <input type="button" value="メニューへ" onClick="parent.location = 'menue.php'"> </td> </tr> </form> </table> </body> </html>
- ベストアンサー
- JavaScript
- メールフォームエラー表示について
お世話になります。 以下のフォーム内容エラー表示のスクリプトはWinIEでは動作するのですが、Firefox、Safariでは動作しません。なぜでしょうか？ご教授下さい。 又、メールアドレスを２つ入力個所を設け、その二つが異なる場合エラーを出したいのですが、どうしたらいいでしょうか？ そして、あるチェックボックスにチェックを入れて場合のみ送信ボタンが押すことができるようにするにはどうしたらいいでしょうか？ 度重なる質問で申し訳ありません。 何卒宜しくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // メールアドレスチェック function isAddress(address) { if(address.indexOf("@",0)<=0) { return false; } else { return true; } } // submit可能か判定(form1) function jdgSubmit1() { var errItem = ""; // お名前が空の場合 if (document.form1.item('name1').value == null || document.form1.item('name1').value == "") { errItem = errItem + "お名前を入力して下さい。<br />"; document.form1.item('name1').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('name1').style.backgroundColor = "#ffffff"; } // ふりがなが空の場合 if (document.form1.item('name2').value == null || document.form1.item('name2').value == "") { errItem = errItem + "ふりがなを入力して下さい。<br />"; document.form1.item('name2').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('name2').style.backgroundColor = "#ffffff"; } // E-mailが空の場合 if (document.form1.item('eaddress').value == null || document.form1.item('eaddress').value == "") { errItem = errItem + "メールアドレスを入力して下さい。<br />"; document.form1.item('eaddress').style.backgroundColor = "#BBBBBB"; } else { if (!isAddress(document.form1.item('eaddress').value)) { errItem = errItem + "正しいメールアドレスを入力して下さい。<br />"; document.form1.item('eaddress').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('eaddress').style.backgroundColor = "#ffffff"; } } // 本文が空の場合 if (document.form1.item('content').value == null || document.form1.item('content').value == "") { errItem = errItem + "お問い合わせ内容を入力して下さい。<br />"; document.form1.item('content').style.backgroundColor = "#BBBBBB"; } else { document.form1.item('content').style.backgroundColor = "#ffffff"; } // エラーがあるか確認 if (errItem != "") { err.innerHTML = errItem; return false; } document.form1.submit(); } --> </script> </head> <body> <form name="form" action="mail-send.php" method="POST"> <div id="err"></div> <div> <table cellspacing="0" cellpadding="0"> <tr> <td>お名前</td> <td><input type="text" name="name1" size="30" maxlength="100" /></td> </tr> <tr> <td>ふりがな</td> <td><input type="text" name="name2" size="30" maxlength="100" /></td> </tr> <tr> <td>E-mail</td> <td><input type="text" name="eaddress" size="30" maxlength="100" /></td> </tr> <tr> <td>本文</td> <td><textarea name="content" rows="6" /></textarea></td> </tr> </table> </div> <input type="submit" value="送信" name="submit" id="submit" onClick="jdgSubmit1();return false" /> </form> </body> </html>
- ベストアンサー
- JavaScript
- サブウィンドウから親ウィンドウのフォームへの書き込み
よろしくお願いします。 やりたい事は サブウィンドウを開いて サブウィンドウのテキストボックスに入力した内容を 親ウィンドウのテキストボックスに書き込みたいのです。 以下親ウィンドウ（oya.html） <html> <head> <script type="text/javascript"> <!-- function search(){ window.open( 'sub.html' ,'childwin', "width=350,height=250,location=no,menubar=no,toolbar=no,resizable=yes,scrollbars=yes" ); } --> </script> </head> <body> <form name="mainform" method="POST" action="hoge.php"> <TABLE border="1"> <TR> <TD>A:<INPUT type="text" name="A" id="A"></TD> </TR> <TR> <TD>B:<INPUT type="text" name="B" id="B"></TD> </TR> <TR> <TD><input type="button" onclick="search();return false;" value="サブウィンドウ"></TD> </TR> <TR> <TD><center><input type="submit" name="exec" value="確認"></center></TD> </TR> </TABLE> </form> </body> </html> 以下サブウィンドウ（sub.html） <html> <head> <script type="text/javascript"> <!-- --> </script> </head> <body> <form name="subform"> <TABLE border="1"> <TR> <TD>A:<INPUT type="text" name="A" id="A"></TD> </TR> <TR> <TD>B:<INPUT type="text" name="B" id="B"></TD> </TR> <TR> <TD><input type="button" value="入力"></TD> </TR> </TABLE> </form> </body> </html> 以上です。親ウィンドウの中にformが入れ子状態になってしまうため javascriptで対応できないのかと思い質問させて頂きました。 ご教示お願いいたします。
- ベストアンサー
- JavaScript
補足
失礼しました。 ダイアログではなく、 入力項目のエラーチェックのために表示しているテキストボックス横に表示されるエラーメッセージについてです。 submitが実行されているのか消えてしまいます。