インプットボックスのいずれかが空白または0出ない場合の記入方法

Question

前提・実現したいこと

ホームページに複数個のインプットボックスを作成し、全てが空白または0が入力された場合はXXXを入力してください。といった表示をコメントとして表示したいと考えております。
現在はif文を使用して作成しておりますが、もっと効率的な方法がございましたら教えて下さい。

発生している問題・エラーメッセージ

いずれかのインプットボックスが空白の場合に表示されてしまいます。

エラーメッセージ

該当のソースコード

if (aaa==""){
}else if (aaa=="0"{
　XXXを入力してください
}else if (bbb==""){
　XXXを入力してください
}else if (bbb=="0"){
　XXXを入力してください
}else if (ccc==""){
　XXXを入力してください
}else if (ccc=="0"){
　XXXを入力してください
}else if (ddd==""){
　XXXを入力してください
}else if (ddd=="0"){
　XXXを入力してください
}else if (eee==""){
　XXXを入力してください
}else if (eee=="0"){
　XXXを入力してください
}else{
 console.log('OK牧場')

試したこと

&&で組み合わせたりしましたが一つでも空白または0があった場合にxxxを入力した下さいと表示されてしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

要件の確認です。

「aaa〜eeeのいずれかの入力が、入力があるかつ0以外の数値があれば、OK牧場にする」

でしょうか。
それとも、

「いずれかの入力が、未入力か0だった場合、NGで入力を促すダイアログの表示」

でしょうか。
返信をお願いします。

[kansai5963]

全ての入力が空白または0だった場合に入力を促すダイアログの表示です。&&と||の混合になるかと想定しておりますが・・・

[miyabi_pudding]

なるほど。
であれば、私の回答でよさそうです。
質問者さんのコードではなぜいずれかの該当入力でストップしてしまうのか、も回答に含めます。

[miyabi_pudding]

もう一点確認ですが、
数値の入力をさせたい、でよろしいでしょうか？

[退会済みユーザー]

donsole.log('OK牧場')
cに直しましょう。NG牧場っす。

[miyabi_pudding]

あ、donsole.log・・・・。
私も気づいてなかった。
dialogかと思ってました。
ありがとうございます。

[kansai5963]

インプットボックスには数値を入力いたします。

Answer 1

例えば、下記のようなHTMLだった場合、

<!-- 共通クラス、numInputを当てておく -->
<input type="tel" name="aaa" class="numInput"><br>
<input type="tel" name="bbb" class="numInput"><br>
<input type="tel" name="ccc" class="numInput"><br>
<input type="tel" name="ddd" class="numInput"><br>
<input type="tel" name="eee" class="numInput">

下記のように一括処理ができます。

const inputs = document.querySelectorAll('.numInput');

// let unInput = '';

// some関数は、配列の要素を走査し、一個でもtrueがあると処理を終了し、論理値を返します。
// つまり、false（入力がない、または0）である限り、回り続け、全てが、該当の入力なら、falseを返してくれます。
// そして、この記述なら、NodeListにもsome関数を使用できます。
const inputOK = [].some.call(inputs, elm => {
  if (!elm.value || isNaN(elm.value) || Number(elm.value) == 0) {
    return false;
  } else {
    // unInput = elm.name;
    return true;
  }
});

if (inputOK) {
  // いずれかの入力があった
  console.log('OK牧場');
} else {
  // 全ての入力が未入力、もしくは0だった
  console.log('XXXを入力してください。');
}

なぜ質問のコードでは理想の挙動にならないのかの解説

では、なぜ、質問のコードではうまくいかないのか。
ifは、条件が真となったら、それ以降の条件文は通らないからです。

例えば、bbbが未入力だったとしましょう。そうするとどうなるか。

// bbbが未入力である
if (aaa==""){
  console.log('XXXを入力してください');
}else if (aaa=="0"{
  console.log('XXXを入力してください');
}else if (bbb==""){
  // が通る
  console.log('XXXを入力してください');
}else if (bbb=="0"){
  // ここ以降はもう通らない。そのため、OK牧場にも当然到達しない
  console.log('XXXを入力してください');
}else if (ccc==""){
  console.log('XXXを入力してください');
}else if (ccc=="0"){
  console.log('XXXを入力してください');
}else if (ddd==""){
  console.log('XXXを入力してください');
}else if (ddd=="0"){
  console.log('XXXを入力してください');
}else if (eee==""){
  console.log('XXXを入力してください');
}else if (eee=="0"){
  console.log('XXXを入力してください');
}else{
  console.log('OK牧場');
}

となるため、else if (bbb == "")以降のelse if条件は適用されません。
よって、あくまでif文でやるなら、下記のようになります。

if (
  (aaa == "" || aaa == "0") &&
  (bbb == "" || bbb == "0") &&
  (ccc == "" || ccc == "0") &&
  (ddd == "" || ddd == "0") &&
  (eee == "" || eee == "0")
){
  console.log('XXXを入力してください');
} else {
  console.log('OK牧場');
}

しかし、これでは、要素が増減するたびに、構文を変えねばならないので、
私の構文のように、要素の増減にも自動で処理を行える形の方がよいかと思います。

Comments

[kansai5963]

要素は5つ以上増えないため上記を採用させていただきます。

Answer 2

<form>
<input type="text" name="aaa" pattern=".*[^0].*" required>
<input type="text" name="bbb" pattern=".*[^0].*" required>
<input type="text" name="ccc" pattern=".*[^0].*" required>
<input type="submit" value="send">
</form>

Comments

[miyabi_pudding]

私も回答した後に気づいたのですが、
全ての入力が、未入力、もしくは0だった場合に、ダイアログを出す、
という要件のようです・・・。
いずれかの入力が正しければ、よし、という要件みたいですね、よく見たら。

[yambejp]

else ifでつないでいるのですべての要素に0以外の何かが入力されてないとNG
と読んだのですが、解釈が分かれますね

[miyabi_pudding]

そうですね・・・。
私も、質問者さんの構文を見て、最初そう解釈したのですが、

> 全てが空白または0が入力された場合はXXXを入力してください。といった表示をコメントとして表示したい
> &&で組み合わせたりしましたが一つでも空白または0があった場合にxxxを入力した下さいと表示されてしまいます。

の一文を見て、
もしかして、逆か？と思いました。

質問修正依頼で要件確認してみようと思います。