• ベストアンサー

送信ボタン押下時に値が未入力だとエラーにしたい

お世話になります。 ユーザー名とパスワードを入力して送信するシンプルなログイン画面を作成しているのですが、ユーザー名かパスワードが未入力の状態で送信(ログイン)ボタンを押した場合はエラーとし、情報を送信しないように出来ますでしょうか。 ログインボタンを押下した際にポップアップ・ウインドウが表示されて「ユーザ名が未入力です」などと画面表示できるのが理想なのですが。。。 現在は下記のようなソースを書いております。 <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="ログイン"> どなたがご存知の方、お教えいただければ幸いです。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 <form action="xxx" method="post" name="loginForm" onSubmit="return check();"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="ログイン"> </form> <head>と</head>の間に <script type="text/javascript"> <!-- function check () { var userName = document.loginForm.username.value; var passWord = document.loginForm.password,value; if ( userName == "" ) { alert ( "ユーザ名を入力して下さい。" ); document.loginForm.username.focus(); return false; } if ( passWord == "" ) { alert ( "パスワードを入力して下さい。" ); document.loginForm.password.focus(); return false; } return true; } //--> </script> こうすることにより、送信時にcheckが呼ばれ、問題が無ければ送信され、 問題があった場合はアラートにて表示を行い、 自動的に問題のあるフォームへフォーカスが移ります。 試してみてください。

suzushiro
質問者

お礼

早速の回答ありがとうございます! ご提示いただいたスクリプトを試してみましたところ、バッチリ希望通りの動きをしました。 やはりガリガリ書かないと実現できないのですね。。。 回答を頂きまして本当にありがとうございました。また何かありましたらよろしくお願い致します。

その他の回答 (1)

  • vivlet
  • ベストアンサー率36% (24/66)
回答No.2

JavaScriptを使用するとこんな感じ <html> <head> <script language="JavaScript"> <!-- function check() { if(form1.username.value.length == 0){ window.alert("ユーザ名が未入力です"); }else if(form1.password.value.length == 0){ window.alert("パスワードが未入力です"); }else{ form1.submit(); } } // --> </script> </head> <body> <form name="form1"> <input type="text" name="username"> <input type="password" name="password"> <br> <input type="button" onClick="check(); return false;" value="ログイン"> </form> </body> </html>

suzushiro
質問者

お礼

早速の回答ありがとうございました。 試してみたところ希望通りの動きをしました。やはりJavaScriptは色々な面で活躍するのですね。私もいつかvivletさんのようにJavaScriptを扱えるように日々精進してゆきたいと思います。 このたびは本当にありがとうございました。 また何かありましたらよろしくお願い致します。

関連するQ&A

  • IEのオートコンプリートの挙動を制御したい

    プログラマーです。 あるWEBの画面で、ログイン用のユーザ名入力欄、パスワード入力欄、ログインボタンと、 ログインしないで実行出来るある機能のテキスト入力欄、実行ボタンがあるとして、 下記のようなミニマムコードを書いてみました。 これをIEで、オートコンプリートが有効な状態で表示させ、ユーザ名、パスワードを入力して ログインボタンを押すと、ユーザ名、パスワードが次回からオートコンプリートで候補表示されます。 しかし、ログインしないで実行出来る機能の入力欄の全てにもユーザ名が候補表示されるという 現象が起こります。 これを回避する方法はないでしょうか。 HTMLソース---------------------------------- <html> <body> <form name="loginLess"> other1<input name="uid" type="text" /><br> other2<input name="pwd" type="text" /><br> <input type="submit" name="loginLessBtn" value="login不要機能" /> </form> <form name="login"> user<input name="uid" type="text" /><br> pass<input name="pwd" type="password" /><br> <input type="submit" name="loginBtn" value="login" /> </form> </body> </html>

  • EXCEL VBA twitter ログイン

    EXCEL VBAを利用しtwitterにログインしたいと思っております ログイン保持機能はoffにします https://twitter.com/login のソースを見てみると <label class="username js-username"> <span>ユーザー名、またはメールアドレス</span> <input class="js-username-field email-input" type="text" name="session[username_or_email]" autocomplete="on"> </label> <label class="password js-password"> <span>パスワード</span> <input class="js-password-field" type="password" value="" name="session[password]"> </label> とあるのですがid='xxxxxx'がなく nameで行けるかと思い objIE.Document.forms(0).item("session[username_or_email]").Value = ID でやってみたのですが実行するとエラーになってしまいます nameを指定して特定のフォームに入力する方法や これでと入力できるという方法を教えて頂けないでしょうか よろしくお願いいたします

  • ログインフォームの送信をURLでフォーム入力を省略

    メールや動画サイト等でログインする時、ID、パスワードを入力しますが、 面倒であるため省略しようと考えます。 例にニコニコ動画のログイン画面でのHTMLソースで<form><input>のみを抜粋します。(https://secure.nicovideo.jp/secure/ のソースです。) <form name="login" id="login" action="login" method="post"> <input type="hidden" name="next_url" value=""> <input value="" type="text" name="mail" id="mail"> <input value="" type="password" name="password" id="password"><input name="login" type="image" id="login_submit" src="img/login_form/btn_login.png" alt="ログイン"> </form> これをURLに置き換えると "https://secure.nicovideo.jp/secure/login?next_url=&mail=メールアドレス&password=パスワード" なると思うのですが"ログインエラー"になります。 わかる方よろしくお願いします。

  • PEARのAuth用のLoginFunctionが動かない

    $a = new Auth("MDB2", $options); のように第3引数を省略し、デフォルトのログイン画面を使うようにするとちゃんとログインできるのですが、自分で作った関数をログイン用に使おうとすると、$a->start()でフォームは表示されますがユーザー名などが入ってきていないようです。getAuthで認証の確認をすると失敗しています。どうして動かないのでしょうか? function loginFunction($username = null, $status = null, $auth = null) { /* * HTML出力は、作成するアプリケーションに合うように、 * 変更してください。 */ echo "<form method=\"get\" action=\"index.php\">"; echo "<input type=\"text\" name=\"username\">"; echo "<input type=\"password\" name=\"password\">"; echo "<input type=\"submit\">"; echo "</form>"; echo "ユーザー名:" . $username . "<br />\n"; //echo "Status:" . $status . "<br />\n"; }

    • 締切済み
    • PHP
  • ハッシュの要素を別ファイルに渡すことができますか

    perlで次のようなプログラムがあります。 sub { 中略 $USERS{$xy}       #$xyは変数  中略 } <form name="user" action="$ENV{'SCRIPT_NAME" method="POST"> ユーザー名:<input type="text" name="username"><br> パスワード:<input type="password" name="pass" value=""><br> <input type="submit" value="ログイン"> ------------- このとき$USERS{$xy} の要素を別ファイルに渡すことができますか。可能ならばどのようにすればよいでしょうか

    • ベストアンサー
    • Perl
  • スタイルシートのみで表の作成

    よくある、「サービスにログインするときのパスワード、ID入力画面」というものを作ってます。 パスワード、テキストフィールド ID、テキストフィールド ログインボタン のような。 たとえば簡単にテーブルで組みますと、 <table width="400" border="0" cellspacing="0" cellpadding="2"> <tr> <td width="100">パスワード</td> <td><label> <input type="text" name="textfield" /> </label></td> </tr> <tr> <td>ID</td> <td><input type="text" name="textfield2" /></td> </tr> <tr> <td colspan="2" align="center"><label> <input type="submit" name="Submit" value="ログイン" /> </label></td> </tr> </table> 似たり寄ったりこんな感じだとします。 これと同等のものを、スタイルシートだけで作成できますか? たとえば、ソースは、 <dl id="LOGIN-FORM"> <dt class="loginFormLabel" id="USER-NAME-LABEL"> <label for="USER-NAME">ユーザ名</label> <input type="text" name="username" size="24" value="" id="USER-NAME" class="inputText" /> </dt> <dt class="loginFormLabel" id="USER-PASSWORD-LABEL"> <label for="USER-PASSWORD">パスワード</label> <input type="password" name="password" size="24" value="" onmousedown="" onkeydown="if (event.keyCode == 13) {enter.click();return false;}" id="USER-PASSWORD" class="inputText" /> </dt> <dt class="loginFormLabel" id="USER-INFO-SUBMIT-LABEL"> <label for="USER-INFO-SUBMIT">アクション</label> </dt> <dd class="loginFormText" id="USER-INFO-SUBMIT-TEXT"> <input type="submit" value="ログイン" id="USER-INFO-SUBMIT" class="submit" /> </dd> </dl> です。 テキストフィールドの頭をそろえたり、ログインボタンの位置を 変えたりしたいです。 テーブルでやればいいのに・・・と思いますが、 スタイルシートで頼むといわれて、困ってます。 教えてください。

  • 半角英数判定

    こんにちわ。最近PHPをやりはじめた者です。 下記のスクリプトを使用して空白判定はできたのですが、半角英数文字 を判定できなくて困っています。エラーが出てしまい、画面遷移できないのです。したいことは、半角英数文字以外がユーザーIDとパスワードに入力されたとき、「半角英数で入力してください」という判定をしたいのです。画面遷移後のスクリプトは文字制限の都合で記載できませんでした。  ユーザー名<br> <form method = "post" action = "subject02-01.php" > <input type = "text" name = "USERNAME"><br> パスワード<br> <input type = "password" name = "PASS"> <input type = "submit" name = "submit" value = "ログイン"> <?php $str = mb_convert_kana($str,"rna") if($_POST["submit"] == "ログイン") if($_POST["USERNAME"] == "root" && $_POST["PASS"] == "admin") { echo "認証に成功しました。"; } else if( $UserName == "" || $Password == "") else if(ereg("[A-Za-z0-9\-]",$str)) else { echo "認証に失敗しました。"; }

    • ベストアンサー
    • PHP
  • FORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

       以下のような画面を作りたいのですが↓ -------------------------------------------------------------------------------- ● a.php (ユーザ情報入力画面) ※フォームに入力する画面    <FORM method="POST" action="b.php">   <INPUT type="text" name="mail">   <INPUT type="submit" name="submit" value="確認">  </FORM> ● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面  <FORM method="POST" action="c.php">   <!-- ここには、フォームに入力された値を表示する -->   <INPUT type="submit" name="submit" value="登録"> // c.php に遷移する   <INPUT type="submit" name="submit" value="戻る"> // a.php に戻る  </FORM> ● c.php (完了画面) -------------------------------------------------------------------------------- b.php について質問なのですが、 b.phpにおいて、登録ボタンと戻るボタンを2つつけて、 それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・? <FORM method="POST" action="c.php">と書いてしまうと、 戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね?? こういう場合ってJavaScriptとかで遷移先を指定するんですか・・? もしそうでしたら、JavaScriptがよくわからないので できればサンプルコード示していただけると助かります・・・。   

  • ENTERキー押下でフォームを送信したいのに・・・

    PHPとHTMLでフォームをいくつか作り、画像タイプの送信ボタンを押下すると送信されるようにしています。ところが、IEの場合、ENTERキー押下で送信できる(下記のPHPの制御文がtrueになる)ものと、できないものがあります。ボタンをクリックすればいずれも送信できます。また、FirefoxではどのケースでもEnterキー押下で送信できます。送信ボタンはどのフォームでもひとつです。 何がどういう場合に、IEでEnterで送信できないのでしょうか? ○HTML側 <form...> ... <input type="image" name="submit" ...> </form> ○PHP側 if(isset($_POST['submit_x']) { ... }

    • 締切済み
    • PHP
  • ボタンを押下するとダウンロードのダイアログが表示されてしまいます…

    ご教授お願いします。 PC&PHP初心者です。 参考書に沿ってPHPの勉強をしているのですが、以下のプログラムが思うように動作しません。 ***************************************************** addressbook.html <html> <head><title>addressinput.html</title></head> <body> 入力フォーム <form action = "addressinput.php" method = "post"> <table border = "1"> <tr> <td>名前</td> <td><input type = "text" name = "name"></td> </tr> <tr> <td colspan = "2" align = "center"> <input type = "submit" value = "入力"></td> </tr> </table> </form> </body> </html> ***************************************************** addressinput.php <html> <head><title>addressinput.php</title></head> <body> <?php $name = $_POST[ 'name' ]; print( "次のデータを受け取りました。<br />" ); print( "名前:" . htmlspecialchars($name)."<br />" ); ?> </body> </html> ***************************************************** addressbook.htmlにある「入力」ボタンを押下するとaddressinput.phpに入力したデータが渡されて、入力したデータを表示させるというものですが、何故かボタンを押下するとダウンロードのダイアログが表示されてしまい困っています。 これってなにか設定が必要なのでしょうか?

    • ベストアンサー
    • PHP

専門家に質問してみよう