Javascript イベント発火

Question

実現したいこと

現在、簡易的なフォームを作成していてアカウント登録の完了のポップを表示するところをJavascriptで実装しています。
ユーザーが名前、ニックネームを共に入力せず追加ボタンを押した際に下記の画像のようなポップが表示されてしまいます。
実装としては無入力の場合、ボタンの操作を無力化したいです。

該当のソースコード

test.js


var result = document.getElementById("result");
var tuikaBtn = document.getElementById("tuikaBtn");
tuikaBtn.addEventListener('click', function() {
  let namae = document.getElementById("namae");
  let nickname = document.getElementById("nickname");
  let okresult = window.confirm(`${namae.value} さん(${nickname.value}）を登録します。よろしいですか？`);
  if ( okresult ) {
    result.textContent = `${namae.value} (${nickname.value}）`;
    alert(`${namae.value} さん(${nickname.value}）にて登録しました。`);
  }
  else {
    
  }
});



tuikaBtn.addEventListener("input", update);
tuikaBtn.addEventListener("change", update);

function update() {
  const isRequired = tuikaBtn.checkValidity();

  if (isRequired) {
    tuikaBtn.disabled = false;
    return;
  }
}

試したこと

参考文献などがないか調べましたが、あまりなくどなたかご教授お願い致します。

Comments

[maisumakun]

「下記の画像」はどこでしょうか？

Answer 1

必要項目が入力されるまでボタンが押せないというならこんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const e_input = new CustomEvent("HTMLEvents");
  e_input.initEvent('input', true, true );
  document.querySelector('[required]').dispatchEvent(e_input);
});
document.addEventListener('input',()=>{
  const flg=[...document.querySelectorAll('[required]')].filter(x=>x.value=="").length>0;
  btn.disabled=flg;
});
</script>
<input type="text" required>
<input type="text" required>
<input type="text" required>
<input type="submit" value="btn" id="btn">

Comments

[daiku0919]

ご教授頂きまして有り難う御座います。

こういった書き方もあるのだと知れました。
有難うございます。

Answer 2

画像がないので推測ですが、おそらく名前もニックネームも空欄のまま、「 さん(）にて登録しました。」というポップが出る、ということですよね？

空欄の場合はボタンを有効にしない、ということであれば、以下のような記述でどうでしょう。

const namae = document.getElementById("namae");
const nickname = document.getElementById("nickname");
const tuikaBtn = document.getElementById("tuikaBtn");

setInterval(() => {
	tuikaBtn.disabled = !namae.value || !nickname.value;
});

フォームのイベントを取得する方法だと、こんな感じで。

const namae = document.getElementById("namae");
const nickname = document.getElementById("nickname");
const tuikaBtn = document.getElementById("tuikaBtn");

namae.addEventListener("input", checkInput, false);
nickname.addEventListener("input", checkInput, false);

function checkInput(){
	tuikaBtn.disabled = !namae.value || !nickname.value;
}

---

追記です。

おそらくここの部分の記述がちょっと違うんですかね？

tuikaBtn.addEventListener("input", update);
tuikaBtn.addEventListener("change", update);

ボタンのイベントを取得するのではなく、inputフィールドのイベントを取得するのが適切かと。

namae.addEventListener("input", update);
nickname.addEventListener("input", update);

Comments

[daiku0919]

ご教授頂きまして有難うございます。

ご指摘頂いた箇所修正したら実装ができました。
有難うございます。