お世話になります。
ユーザー名とパスワードを入力して送信するシンプルなログイン画面を作成しているのですが、ユーザー名かパスワードが未入力の状態で送信(ログイン)ボタンを押した場合はエラーとし、情報を送信しないように出来ますでしょうか。
ログインボタンを押下した際にポップアップ・ウインドウが表示されて「ユーザ名が未入力です」などと画面表示できるのが理想なのですが。。。
現在は下記のようなソースを書いております。
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="ログイン">
どなたがご存知の方、お教えいただければ幸いです。
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が呼ばれ、問題が無ければ送信され、
問題があった場合はアラートにて表示を行い、
自動的に問題のあるフォームへフォーカスが移ります。
試してみてください。
早速の回答ありがとうございます!
ご提示いただいたスクリプトを試してみましたところ、バッチリ希望通りの動きをしました。
やはりガリガリ書かないと実現できないのですね。。。
回答を頂きまして本当にありがとうございました。また何かありましたらよろしくお願い致します。
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>
早速の回答ありがとうございました。
試してみたところ希望通りの動きをしました。やはりJavaScriptは色々な面で活躍するのですね。私もいつかvivletさんのようにJavaScriptを扱えるように日々精進してゆきたいと思います。
このたびは本当にありがとうございました。
また何かありましたらよろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- PHP php ログイン 1 2022/11/01 00:24
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
入力チェックとエラーメッセージの表示
Java
-
JSP/サーブレットで一般的な入力チェックの仕組みについて
Java
-
-
4
リクエストに応じたselectedの初期値設定方法
Java
-
5
JSPでのArrayListの表示について困っています
Java
-
6
テキストボックスの入力をリセット
JavaScript
-
7
レコード件数の表示
Java
-
8
Java-jspの画面入力値保持について
Java
-
9
ラジオボタンが両方とも選択できてしまう
HTML・CSS
-
10
python エラー
その他(プログラミング・Web制作)
-
11
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
12
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
13
TextBoxに半角数字以外を入れたらエラーメッセージを出す
JavaScript
-
14
JSPでメッセージボックスを表示したい
Java
-
15
未入力のラジオボタンに、alertを表示したい。
JavaScript
-
16
ループ処理の際、最後だけ,"をつけたくない"
Java
-
17
count(*)で取得した値をJAVAの変数に代入するには?
Java
-
18
背景色を変えて未入力チェックをしたいのですが。。。
JavaScript
-
19
eclipseでTomcat起動時にエラーがでる
Java
-
20
フォームで同じ複数のnameで違うvalueの送信
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Duolingo のソースコードの名前...
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
、URL化させるにはどうしたらい...
-
コードを書いて下さい( ; ; )...
-
12月のカレンダーを表すHTMLを...
-
Webページのリンクの貼り方を教...
-
CSSデータの作成方法について(...
-
goo は、放置?
-
静止画画像をクリックすると音...
-
メモ帳の段落の揃え方
-
HTML に © は、© を使わず...
-
ホームページをちょっと加工す...
-
HTML入門でもう躓いてしまった。
-
CSSでつくったメニューのアニメ...
-
css初心者 フレックスボックス...
-
HTMLで特定の文字だけ色を変え...
-
角丸画像の背景色を透明にした...
-
HTML 訪問カウンターを自作したい
-
1つの「ホームページビルダー2...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
送信ボタン押下時に値が未入力...
-
複数のフォームを一括で送信す...
-
URL パラメータを使ってフォー...
-
【html】)パスワード認証フォー...
-
フォーム要素以外にもname属性...
-
リンクをクリックした時にform...
-
GETをPOSTに変更したところ 送...
-
checkboxを「変更不可」にでき...
-
長文のmailtoの使い方
-
type="hidden"を使って時刻を送信
-
<a href=**?***=***>をGET方式で
-
フォームに入力した値をURLに付...
-
submitの処理の後別の画面を表...
-
</form>タグを使用すると強制的...
-
お問い合わせフォームの送信後...
-
mailtoについて
-
CGI動作後に元のページに戻る方法
-
メールフォームの送信ボタンが...
おすすめ情報