windowオブジェクトの操作方法とは?

このQ&Aのポイント
  • windowオブジェクトを使用して登録フォームのバリデーションを実装する方法
  • windowオブジェクトを使用してEメールの一致チェックを行う方法
  • windowオブジェクトを使用してEメールの入力チェックを行う方法
回答を見る
  • ベストアンサー

windowオブジェクトの操作

登録フォームを作成しています。 登録内容に誤りがなければ次のページへ飛び、登録内容に誤りがある場合は再度同じページで登録させる(次のページにはいかないようにさせたい。)というふうにしたいのですがどうすればよいでしょうか? function mailcheck(){ var tmail = document.form.temail.value; var mail = document.form.email.value; if(tmail != mail){ window.alert("E-Mailが一致しません!"); ★ } else if((tmail == "") | (mail == "")){ window.alert("E-Mail記入されていません! "); ★ } } <input type="submit" value="確認" name="submit" onclick="mailcheck()"> この場合は★マークの所でwindowオブジェクトだけで操作できるのでしょうか?

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

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.2

フォームの入力チェックは、送信ボタンの onClick ではなく、FORMタグの onSubmit で行います。 でないと、送信ボタン以外の方法で送信されてしまう時にチェックすることができません。 (例えば、テキストボックスでエンターキーを押すと送信されるブラウザがあります。) FORMタグの onSubmit は優秀で、   return false を書けば送信せず、   return true を書くか return ~を書かなければ送信します。 これを利用し、FORMタグに   onSubmit="return mailcheck()" を追加し、関数 mailcheck から true または false を返してやれば、送信する/しないを制御することができます。 関数 mailcheck の方は、★の部分に   return false; を書き、関数の最後に   return true; を追加してください。

u-mesh12
質問者

お礼

onSubmitという機能があるのは知りませんでした。アドバイスどおり編集しなおしたら、うまくできるようになりました。適切なアドバイスありがとうございました。

その他の回答 (1)

  • Y_eRu
  • ベストアンサー率32% (33/101)
回答No.1

こんにちわ(o^-^o) 次の処理へ行かずに戻すのは ★のところに 各々 return; と入れてみたらどうでしょうか? 確認していないので ちょっと不安ですが(;´д` ) 失礼しましたm(_ _)m

関連するQ&A

  • window.open とtarget属性について

    お疲れ様です。 いつもお世話になっています。 以前 http://okwave.jp/qa4125614.html で質問させていただいた件に関することなのですが、 現状のソース function chk(){ var k=0; var i; for(i=0;i<6;i++){ if(document.form1.elements[i].value ==''){ k++; } } if(k == 0 || k==3 || k==6){ window.open('','nWin','width=640,height=320'); }else{ alert('エラーですよ'); } } ---------- <form onsubmit="chk();" name="form1" target="nWin" action="xxx.php" method="post"> <input type="text">が6こ <input type="submit"> </form> で、今フォームの中のnullの数によって、window.openを実行させるかさせないかの実装をしています。 正常フローでwindow.openは発動するのですが、target属性がformに入っているおかげで、エラーでもwindowが新しく開いてしまいます。 targetを消せば、エラーの際はwindowは開きませんが、正常フローの際、windowは開きますが、値がわたりません(親windowに表示されてしまう) あちらをたてればこちらがたたず状態です。 正常フローのときは 子windowが開く 子windowに値がわたり、子windowに表示される エラーのときは 子windowは開かない 親windowにエラーメッセージを表示させる(とりあえずalertでよい) という切り替えをうまくするにはtarget属性をなんとかする以外ないと思うのですが、どうすればうまくいくのか頭を抱えている状態です。 恐れ入りますが、よい案があれば教えていただきたいです。 よろしくお願いします。

  • Nullまたはオブジェクトではありません。の対策

    Javascriptで以下のエラーが発生します。 'エラー: document.test_form.test_element.value'はNullまたはオブジェクトではありません。 この場合、ソースでは alert(document.test_form.test_element.value); としているのですが、以下のようにnullを使って分岐させるのが Javascriptの王道でしょうか? if (null != document.test_form.test_element){ alert(document.test_form.test_element.value); } よろしくお願いいたします。

  • if文の挙動が変です。何が悪いのでしょうか?

    こんにちは,よろしくお願いします。次のような関数を作って,条件に当てはまれば,formElemを送信するコードを書いたところ,条件を満たしていないのにもかかわらず,送信されてしまいます。それはどこが悪いのでしょうか。教えてください。 もう少し詳しく言うと,この関数は,p1とg1が変更されたとき(onchngeで)に呼び出されるようになっています。 このとき,p1が先に変更され(条件1)を満たしtrueになり,その後で,g1が変更され(条件2)がtrueになったときは,正常に機能します。alert("yes-submit");も表示され,formの送信も実行されます。 しかし,この逆で,g1が先に変更され(条件2)を満たしtrueになった時に,formが送信されてしまうのです。(条件1)が満たされていないのにもかかわらずです。気づかないうちに,条件を満たしていることもあるのかと思って,alert("yes-submit");を追加しました。しかし,そのalert("yes-submit");は表示されません。つまり,最後のif文がyesの時に実行されるブロックを通過していないのにもかかわらず,formの送信のみが行われてしまうのです。(true)&&(false)でyesにはなりませんよね。これって,変ですよね。いったいなぜ,このような挙動を示すのでしょうか?お願いします。教えてください。 function SchlSlct(){ var formElem = document.getElementById("form1"); if(document.getElementById("p1").selectedIndex > 0){ alert("p-yes"); }else{ alert("p-no"); } //以上(条件1) if(document.getElementById("g1").value != ""){ alert("g-yes"); }else{ alert("g-no"); } //以上(条件2) if((document.getElementById("p1").selectedIndex > 0) && (document.getElementById("g1").value != "")){ alert("yes-submit"); formElem.submit(); } //以上((条件1)&&(条件2)) }

  • 【javascript】firefoxでの、alertについて

    はじめてOK Waveで質問します。 よろしくお願いします。 javascriptについての質問です。 form内の複数のradioの項目の組み合わせに応じて、if文でlocation.hrefでページ遷移するというjsを書きました。 IEでは動作しましたが、firefoxで動作しませんでした。 firefoxで動かない原因が分からず、自分なりにalertを使いながら原因を探っていたところ、 if文の次にalertを書いたところ、firefoxでも動作することができました。 ------------------------------ function pageshift() { var one, two; for (i = 0; i < 2; i++) { if(document.form.one[i].checked){ one = document.form.one[i].value; } } for (i = 0; i < 2; i++) { if(document.form.two[i].checked){ two = document.form.two[i].value; } } if(one == 'a' && two == 'a') { window.location.href = 'aa.html';} } else if(one == 'a' && two == 'b') { window.location.href = 'ab.html';} } alert('test'); } ------------------------------ (最後のalert('test');を書いたらそれまでfirefoxでは動作しなかったものが、動作した、ということです。IEではalert('test');がなくても目的通りに動作しています。) しかしながら、alertでメッセージが出てきてしまうのは避けたいと考えています。 alertを書いてページ遷移のfunctionが動作(正常に処理?)したとするならば、alertと同じような処理状態でなおかつメッセージを表示しないような状態に持っていければ、目的どおりになるのではないかと考えています。 どのように記述していけばいいのでしょうか・・・? よろしくお願いいたします。

  • ラジオボタンとセレクトボックスの選択チェック

    ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }

  • return falseが効かない

    formで申し込みのステップ中に、selectで必須選択させる部分があり、値があれば、次に進むように考えています。 選択していない場合、アラート自体は表示しますが、ダイアログをOKすると、結局は次のページでsubmitしてしまいます。 本当は、止めたいのですが、、、。 気になる点としては、select部分を表示する場合としない場合があり、DBからの値によって、phpで表示しているくらいでしょうか。 javascriptを書く位置をいろいろ変えても結果はかわりません。 エラーもでません。 何か重大な間違いなどあるのでしょうか?。 <head> <script Language="JavaScript"> <!-- function check(){ var flag = 0; if(document.form.camp.options[document.form.camp.selectedIndex].value == ""){ flag = 1; } if(flag==1){ alert('選択されていません'); // 選択されていない document.form.camp.focus(); return false; // 送信を中止 } } // --> </script> </head> (~いろいろあって、、~) <form name="form" method="post" action="damy.php" onSubmit="check()"> <select name="camp" id="camp"> <option value="">--選択してください--</option> <option value="あ">あ</option> <option value="い">い</option> <option value="う">う</option> </select> (~いろいろあって、、~) <input type="submit" value="次に進む"> /form>

  • 半角英数字のみの入力にエラーを返すには

    運営しているサイトに設置したコメントフォームからスパムがたくさん送信されてきます。 その対策として、「氏名のよみがな」入力欄が半角英数字のみの入力の場合にはアラートを出して投稿できないようにしたいです。 下記のようなJSを使用していますが、 if (!kana) { alert('氏名のよみがなを入力してください。'); return false; } の部分を変更して「半角英数字しか入力されていない場合、アラートを返す」ようにするには、どうしたら良いでしょうか? htmlの文字コードはShift_JISです。 よろしくお願いします。 function postComment { var name = eval('document.name.value'); var kana = eval('document.kana.value'); var email = eval('document.email.value'); var comment = eval('document.comment.value'); sum++; if (!name) { alert('氏名を入力してください。'); return false; } else { if (!kana) { alert('氏名のよみがなを入力してください。'); return false; } else { if (!email) { alert('メールアドレスを入力してください。'); return false; } else { if (!comment) { alert('コメントを入力してください。'); return false; } else { var confirm_text = '以下の内容で送信します\n' + 氏名:' + name + '\n よみがな:' + kana + '\n メール:' + email + '\n 本文:' + comment; if (!confirm(confirm_text)) { return false; } else { alert('コメントを送信しました。'); } } } } } }

  • Javascriptでセレクトメニューの選択チェックの方法

    Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=\"JavaScript\"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>

  • フォームのチェックについて

    今、フォームの送信ボタンを押すとチェックする 関数を作成しております。 function restChar() { if(10000 < document.F1.ご質問内容.value.length) window.alert("ご質問内容は全角5,000字以内でお願いします"); } function check(){ var flag = 0; if(document.F1.name.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.F1.kana.value == ""){ // 「パスワード」の入力をチェック flag = 2; } else if(document.F1.mail.value == ""){ // 「コメント」の入力をチェック flag = 3; }      else if(document.F1.ご質問内容.value == ""){ // 「コメント」の入力をチェック flag = 4; } if(flag == 1){ window.alert('お名前を入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 2){ window.alert('フリガナを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 3){ window.alert('メールアドレスを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }      if(flag == 4){ window.alert('ご質問内容を入力して下さい'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } fOBJ = document.F1.mail.value; check = /.+@.+\..+/; if (!fOBJ.match(check)){ window.alert("メールアドレスが正しくありません"); return false; // 送信を中止 } fOBJ = document.F1.ご質問内容.value.length; if(10000 < fOBJ){ window.alert("ご質問内容は全角5,000字以内でお願いします"); return false; // 送信を中止 } return true; // 送信を実行 } こんな感じです。 1-4のチェックは問題ないのですが、 アドレスと文字数のチェックは、一度は ダイアログがでますが、連続で押すと通ってしまいます。 何がわるいのでしょうか?

    • ベストアンサー
    • Java
  • javascript 要素取得

    htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、 下記のようなプログラムを書きました。 セレクトボックスから複数選択できるようにしたいのですが、 表示されるのは複数選んだ際に一番初めに選択したものだけです。  例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。 しかし、これを「あああ.いいい」としたいのです。 できれば、 「あああ  いいい」 と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか? どなたかよろしくお願いします。 javascript側 function checkbox(){  var str="";  for(i=0;i<document.form1.elements.length;i++){   if(document.form1.elements[i].checked){     if(str != "") str = str + ".";     str = str + document.form1.document[i].value;   }  }  if(str == ""){   alert("入力してください");   return false;  }else{   document.form1.submit();  } } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">

専門家に質問してみよう