プロが教えるわが家の防犯対策術!

javascriptのif文で、値が空白ならエラーメッセージを表記する記述を
ご教授願います。


パターン1

<body>
<input id="test" type="number">
</body>

この場合の<input>の値が空かどうかの確認方法

パターン2
<body>
<select id="test">
<option></option>
<option>テスト</option>
</select>
</body>

この場合の<option>の値が空かどうかの確認方法


上記2点をお伺いできますと幸いです。

宜しくお願い致します。

質問者からの補足コメント

  • すみません、補足致します。

    if ( !test ) {};

    の記述では出来るのですが、他の方法があれば教えて頂きたいことと、
    「!」もよく分からず使っていますので、そのあたりも教えて頂けると助かります。

      補足日時:2018/03/21 10:56

A 回答 (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>
    • good
    • 0

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>
    • good
    • 0

サブミットしないなら何をトリガーにチェックしたいかですね



たとばこう

<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>
    • good
    • 0

こんにちは



>if ( !test ) {}; の記述では出来るのですが、~~
できているとは思えませんが、テストなさっているのでしょうか?

No1様の回答の方が簡単なのでよさそうに思いますが、どうしてもスクリプトでチェックしたいのなら
 if(document.getElementById("test").value){
  値が入力されている場合
 } else {
  未入力(空白)の場合
 }
とか。

>「!」もよく分からず使っていますので~~、
まずは、自分で調べられるようになりましょう。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
    • good
    • 0
この回答へのお礼

講師の方は
if ( !test ) {}; の記述でされてたのですが、
他の記述もありそうだなって思ったので質問させて頂きました。

もうシステムは完成したのですが、気になって、、、
他に方法ないですかね??

お礼日時:2018/03/26 21:56

サブミット時のチェックですよね?


まずは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>
    • good
    • 0
この回答へのお礼

すみません。聞き方悪かったですかね、、、。
サブミットは関係ないです。。

お礼日時:2018/03/26 21:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!