表單提交時不會顯示警報

Question

所以我創建了一個表單，它需要提醒用戶表單已經提交，但實際上並沒有在任何地方提交表單。 我嘗試在單擊提交按鈕時設置警報，但警報不會顯示。 我不確定我做錯了什么。 這是我關於表單的 html 和 .js 代碼。

 var validName = false; var validEmail = false; var validPhone = false; var validtxtArea = false; function validate() { if (validName && validEmail && validPhone && validtxtArea) { alert("Thank you for submitting your form!"); console.log("Thank you for submitting your form!"); } } document.getElementById("Name").addEventListener('input', function(evt) { var name = document.getElementById("Name").value; validName = (name !== ''); validate(); }); document.getElementById("Email").addEventListener('input', function(evt) { var email = document.getElementById("Email").value; // validEmail = string.indexOf('@') !== -1 && string.indexOf('.') !== -1; // validate(); }); document.getElementById("Phone").addEventListener('input', function(evt) { var phone = document.getElementById("Phone").value; validate(); }); document.getElementById("txtArea").addEventListener('input', function(evt) { var txtarea = document.getElementById("txtArea").value; validtxtArea = (txtarea !== ''); validate(); });

 <form name="form" id="form" onsubmit="return validate()" method="post" class="text-center border border-light"> <div class="form-group row"> <label for "Name" class="col-md-2 col-form-label">Name:</label> <div class="col-md-10"> <input type="text" id="Name" name="Name" class="form-control" required> </div> </div> <div class="form-group row"> <label for "Email" class="col-md-2 col-form-label">Email:</label> <div class="col-md-10"> <input type="email" id="Email" name="Email" class="form-control" required> </div> </div> <div class="form-group row"> <label for "Phone" class="col-md-2 col-form-label">Phone:</label> <div class="col-md-10"> <input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required> </div> </div> <div class="form-group row"> <label for "Inquiry" class="col-form-label">Reason for Inquiry:</label> <div class="col"> <select name="Reasons" id="inquiry" class="form-control"> <option value="CateringDefault">Catering</option> <option value="PrivateParty">Private Party</option> <option value="Feedback">Feedback </option> <option value="Other">Other</option> </select> </div> </div> <div class="form-group row"> <label for "info" id="Info" class="col-form-label">Additional Information:</label> <div class="col"> <textarea class="form-control" id="txtArea"></textarea></div> </div> <div class="form-group row"> <label for "Customer" class="col-form-label">Have you been to the restaurant?</label> <div class="col"> <div class="form-check form-check-inline"> <input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked /> <label class="form-check-label" for="no">No</label></div> <div class="form-check form-check-inline"> <input type="radio" id="yes" name="answer" value="YES" class="form-check-input" /> <label class="form-check-label" for="yes">Yes</label> </div> </div> <div class="form-group row"> <label for "Choices" class="col-form-label">Best days to contact you:</label> <div class="col"> <div class="form-check-inline"> <label class="form-check-label" for="M">M </label> <input type="checkbox" id="choices" name="choices" value="monday" class="form-check-input"> <label class="form-check-label" for="T">T </label> <input type="checkbox" id="choices" name="choices" value="tuesday" class="form-check-input"> <label class="form-check-label" for="W">W </label> <input type="checkbox" id="choices" name="choices" value="wednesday" class="form-check-input"> <label class="form-check-label" for="Th">Th </label> <input type="checkbox" id="choices" name="choices" value="thursday" class="form-check-input"> <label class="form-check-label" for="F">F</label> <input type="checkbox" id="choices" name="choices" value="friday" class="form-check-input"> </div> </div> </div> </div> <div class="row"> <button type="submit" id="submitButton" class="btn btn-default" onclick="validate();">Submit</button> </div> </form>

Answer 1

您是否嘗試通過將驗證功能綁定到提交按鈕來一次驗證所有字段？ 這可能比驗證每個鍵入的字符更有效。

也許

function validate(name, email, phone, txtarea) {
  if (name !== "" && email !== "" && phone !== "" && txtarea !== "") {
    alert("Thank you for submitting your form!");
    console.log("Thank you for submitting your form!");
  }
}

document.getElementById("submitButton").addEventListener('click', function(evt) {
  evt.preventDefault()

  var email = document.getElementById("Email").value;
  var name = document.getElementById("Name").value;
  var phone = document.getElementById("Phone").value;
  var txtarea = document.getElementById("txtArea").value;

  validate(name, email, phone, txtarea);
});

我希望有幫助