Javascriptに条件分布ついて(再)

Question

前回に引き続いた質問になってしまいますが、下記コードにて、テキストボックスが未入力で送信ボタンを押した場合、アラートが表示される様になります。＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ HTML(一部抜粋): ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ Javascript: document.getElementById('form').onsubmit = function() { let blank = document.getElementById('form').test.value; if(blank === "") { window.alert('入力されていません'); } }; ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ですが、これが下記の様にテキストボックスが2つ以上になると上手く分岐してくれず、入力をしてもアラートが表示されてしまいます。

会社名・団体名

(例：＊＊株式会社、＊＊大学＊＊学部＊＊学科)

氏名(漢字)(必須)

例：明和太郎)

内容をご確認の上、よろしければ下記ボタンをクリックして下さい。

（上記ボタンを押した後、次の画面がでるまで、４～５秒かかりますので、続けて２回押さないようにお願いいたします。）

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿イメージとしてテキストボックスが両方、もしくはどちらかが未入力の場合にアラートを表示される様にしたいです。テキストボックスが1つだと正しく動作するのに何故2つ以上だと動作しないのかわかりません。テキストボックスが1つ増えるごとにname属性だけを変えて、上記のJabascriptを繰り返し記述する事になってしまうのでしょうか？前回,HTMLのとある属性であっさり解決してしまいましたがJavascriptで作れるようになりたいと思い、再度投稿しました。宜しくお願いします。

lawson · Accepted Answer

テキストボックスのnameが両方
testになってるなどで、
何か誤動作してせんか。
そのnameは、そうしておく
意図があるかもなので、そのままでも、いいので、

例えば、

let blank = document.getElementById('form').test.value;

の部分ですが、
form要素で判定するのでなく。

テキストボックスに指定してる
idでとるのはどうですか

input-text
input-2
のことです。

変数のblankというより
textValueなどのほうが、
意図に合うし、
2つあるから、1、2
と、番号打って
textValue1
textValue2

にするとか。
あと、
).test.value
は、
).value
にするとか。
name属性のtestは、
テキストボックスの入力値の
取得に使わないと、
考えると。

そうすると、

let  textValue1  = 
document.getElementById('input-text').value;

let  textValue2  = document.getElementById('input-2').value;

と、別々に、
テキストボックスの値をとるので、
いずれかの一方でも
入力無しで、
アラートだしたかったら

if(textValue1 === "" || textValue2 === "") {
        window.alert('入力されていません');   
    }

なんでしょうけど。

ところで、
アラート出力時、
onsubmitで、
submit自体をキャンセルするのに、
return false;
などいるんじゃなかったか。

覚えてない、何かキャンセルしてないと、アラート閉じたあと、
次のsubmit処理進むかもしれないです。
キャンセルが
return false;
だったか、覚えてないから
調べてくださいね。
それら、考慮したら、

if(textValue1 === "" || textValue2 === "") {
        window.alert('入力されていません');          return false;
    }
などになりそうで。

yambejp · Answer

入力必須要素にはrequiredをつけてください

babu_babu_baboo · Answer

function check (event) {
　let
　　form = event.target,
　　elements = form.elements,
　　test = elements['test'],
　　val0 = test[0].value,
　　val1 = test[1].value,
　　rst = val0 + val1;

// rst = [...form.querySelectorAll('input[name="test"]')].reduce((a,b)=>a.value+b.value);
　
　if ("" === rst) {
　　event.preventDefault ();
　　alert('入力されていません');
　}
　else {
　　let submit = form.querySelector ('input[type="submit"]');
　　submit.disabled = true;
　}
}

document.querySelector ('#form').addEventListener ('submit', check, false);

</script>

Javascriptに条件分布ついて(再)

テキストボックスのnameが両方

入力必須要素にはrequiredをつけてください

<form action="#" method="POST" id="form">

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング