时间戳

首页 > 解决方案 > 提交时表单不会显示警报

javascript - 提交时表单不会显示警报

问题描述

因此，我创建了一个表单，该表单需要提醒用户表单已提交，而无需在任何地方实际提交表单。我尝试在单击提交按钮时设置警报，但警报不会显示。我不确定我做错了什么。这是我关于表单的 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>

标签： javascript

解决方案

您是否尝试通过将验证功能绑定到提交按钮来一次验证所有字段？这可能比验证每个键入的字符更好。

也许

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);
});

我希望这会有所帮助

推荐阅读