javascriptのif文で、値が空白ならエラーメッセージを表記する記述を
ご教授願います。
パターン1
<body>
<input id="test" type="number">
</body>
この場合の<input>の値が空かどうかの確認方法
パターン2
<body>
<select id="test">
<option></option>
<option>テスト</option>
</select>
</body>
この場合の<option>の値が空かどうかの確認方法
上記2点をお伺いできますと幸いです。
宜しくお願い致します。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
感嘆符(!)が使いこなせるなら、こういうのはどうですか?
select要素の value値の取得ができるものとできないものがあったような?
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>まねしてはいけない</title>
<body>
<form>
<p><input type="number" name="HOGE0" value="">
<p><input type="number" name="HOGE1" value="">
<p><input type="number" name="HOGE2" value="">
<p>
<select name="HOGE3">
<option value=""></option>
<option value="テスト">テスト</option>
</select>
<p><input id="hoge" type="button" value="Values check !">
</form>
<script>
document.addEventListener ('click', ({target:{id, form}}) =>
'hoge' !== id || alert (
Array.from (form.querySelectorAll ('*[name^="HOGE"]'))
.filter (e => ! e.value).map (e => e.name).join ('\n'))
, false);
</script>
No.4
- 回答日時:
No2です
>if ( !test ) {}; の記述でされてたのですが、
>他の記述もありそうだなって思ったので質問させて頂きました。
No2もNo3も他の記述法なのだけれど、お求めのものとは違うらしいので、質問者様が『他の記述』と言うことで、一体どのようなものを求めているのかわからないため、書きようがありませんが、他に気になったところがありましたので…
No1にも書きましたが、ご提示の
>if ( !test ) {};
は、ご質問文のように『値が空白か否か』をチェックする意味にはなっていません。
>講師の方は記述でされてたのですが、
とのことですので、
・講師が間違って説明した
・質問者様が間違って理解した
のどちらかではないかと思います。
状況がわからないので勝手な想像ですが、後者の可能性が大ではないかと思います。
ついでながら・・・
>if ( !test ) {};
のように、idをそのまま要素として扱うような記述法は、(大方の場合は動作しますが)うまくいかないケースもあるので、簡単で覚えやすいものではありますが、これに頼るようなことはしないほうが良さそうに思います。
・・・と書いても無視されるだけでしょうから、うまくいかない簡単な例を、一応、以下に挙げておきます。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title></head>
<body>
<select id="status">
<option>status111</option>
<option>status222</option>
<option>status333</option>
</select>
<script type="text/javascript">
document.getElementById("status").addEventListener("change", function(){
var elm = document.getElementById("status");
alert("通常の方法による値=" + elm.value + "\nIDを用いた場合の値=" + status.value);
}, false);
</script>
</body>
</html>
No.3
- 回答日時:
サブミットしないなら何をトリガーにチェックしたいかですね
たとばこう
<script>
document.addEventListener('click',function(e){
var t=e.target;
if(t.nodeName=="INPUT" && t.type=="button" && t.value=="check" && t.getAttribute('data-target')){
var flg=document.querySelector("#"+t.getAttribute('data-target')).value!=="";
alert(flg?"はいってる":"から");
}
});
</script>
<form>
<input id="test1" type="number">
<input type="button" value="check" data-target="test1">
</form>
<form>
<select id="test2">
<option value="">---</option>
<option value="1">テスト1</option>
<option value="2">テスト2</option>
</select>
<input type="button" value="check" data-target="test2">
</form>
No.2
- 回答日時:
こんにちは
>if ( !test ) {}; の記述では出来るのですが、~~
できているとは思えませんが、テストなさっているのでしょうか?
No1様の回答の方が簡単なのでよさそうに思いますが、どうしてもスクリプトでチェックしたいのなら
if(document.getElementById("test").value){
値が入力されている場合
} else {
未入力(空白)の場合
}
とか。
>「!」もよく分からず使っていますので~~、
まずは、自分で調べられるようになりましょう。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
講師の方は
if ( !test ) {}; の記述でされてたのですが、
他の記述もありそうだなって思ったので質問させて頂きました。
もうシステムは完成したのですが、気になって、、、
他に方法ないですかね??
No.1
- 回答日時:
サブミット時のチェックですよね?
まずはrequiredだけでためしてみては?
<form>
<input id="test1" type="number" required>
<input type="submit" value="go">
</form>
<form>
<select id="test2" required>
<option value="">---</option>
<option value="1">テスト1</option>
<option value="2">テスト2</option>
</select>
<input type="submit" value="go">
</form>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
VBScriptでHTMLのセレクトボッ...
-
JavascriptからSQLへ繋ぎ方が分...
-
【JavaScript】プルダウンで数...
-
全てのselect要素をデフォルト...
-
コードレビューをお願いします。
-
3つのselectでURLパラメータを...
-
検索窓とプルダウンメニュー機...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
selectが変更されたらnameを指...
-
メールフォームでのラジオボタ...
-
3つの連動したプルダウンメニュ...
-
javascriptで合計金額を算出し...
-
プルダウンで選択した項目にあ...
-
子ウインドウから親ウインドウ...
-
セレクトボックスで選択した内...
-
<select> をmultiple にしてい...
-
javascriptでoptionタグを削除...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
複数のプルダウンを1つにまとめ...
-
全てのselect要素をデフォルト...
-
select要素のvalueを配列で取得...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
VBScriptでHTMLのセレクトボッ...
-
【javascript】連想配列からセ...
-
webページの一部のみの更新につ...
-
3つのselectでURLパラメータを...
-
プルダウンの値によって活性・...
-
セレクトボックスで配列を呼び...
-
プルダウンの選択値により活性...
-
3つの連動したプルダウンメニュ...
-
selectボックスで選択数を制限...
おすすめ情報
すみません、補足致します。
if ( !test ) {};
の記述では出来るのですが、他の方法があれば教えて頂きたいことと、
「!」もよく分からず使っていますので、そのあたりも教えて頂けると助かります。