Question

在我发出警告按钮之前，我已经能够使此代码工作，但是我需要向用户发送某种形式的通知，告知表单已提交（尽管实际上不需要在任何地方提交）。电子邮件，电话和姓名字段是必填字段，但对于我现在具有的警报，即使必填字段为空，它也会发出“已收到提交”警报。

<!DOCTYPE html>

  <html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Contact Us</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" />

<script type="text/javascript">
const name = textField.checkValidity();
const email = emailField.checkValidity();
const phone = telField.checkValidity();


function submitAlert() {
  alert("Thank you for your feedback. Your form has been submitted.");
}
</script>

  <style>
    form {
      margin: 0 auto;
      align-content: center;
      text-align: center;
      font-family: 'Open Sans Condensed', sans-serif;
      width: 35%;
    }


      </style>
    </head>

    <body>
      <div class="container">
        <div class="jumbotron jumbotron-fluid">

                <header>
                  <h1 class="display-1">Burger Shack</h1>
                  </header>
                  <p class="lead"> New location in Rice Village coming April 2020!</p>
        </div>


      <nav>
        <hr />
        <p><a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a>
          <a class="btn" href="menu.html">Menu</a>
          <a class="btn" href="contact.html">Contact Us</a>
        </nav>
        <hr />


<div class="container">
        <form name="contactForm" onsubmit="return validateForm()" method="post" class="text-center border border-light">
          <div class="form-group row">
          <label for "Name" class="col-md-2 col-form-label"><b>Name:</b></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"><b>Email:</b></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"><b>Phone:</b></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"><b>Reason for Inquiry:</b></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"><b>Aditional Information:</b></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="M" name="choices" value="monday" class="form-check-input">
            <label class="form-check-label" for="T">T </label>
            <input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input">
            <label class="form-check-label" for="W">W </label>
            <input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input">
            <label class="form-check-label" for="Th">Th </label>
            <input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input">
            <label class="form-check-label" for="F">F</label>
            <input type="checkbox" id="F" 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="submitAlert();">Submit</button>
</div>
        </form>
      </container>




</div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</body>

<footer>
  <hr />
  <p> 305 Gray Street, Houston, TX, 77004 <br />
    713-555-6752</p>
    </footer>
</html>

Answer 1

与其在每个字段上调用checkValidity并在页面加载后立即执行，不如在表单的form事件期间检查submit的有效性。不要在提交button的{{1}}事件上执行此操作。如果有效，则不执行任何操作，让click事件继续并执行其操作。如果不是，请使用event.preventDefault()取消活动。

注释：

将submit元素放在代码末尾的script标记之前，以便在浏览器到达该点时，所有页面HTML都将被解析到内存中并且可以访问。

Do not set up events using inline HTML event attributes，例如 </body>或onclick。将所有事件绑定单独进行 JavaScript部分。
onsubmit元素必须放在<footer>元素内。
Don't use self-terminating tags，例如<body>或<br />。
<hr />元素不应仅用于视觉样式。改用CSS。

<b>

Answer 2

首先，为输入添加一个ID。第二：

function submitAlert() {
 if (('.contact-form').find('input[type=text],select')) {
  alert("Thank you for your feedback. Your form has been submitted.");
 }
}

查看inpunts是否正在发送值。

仅在必填字段输入的情况下，如何使表单提交？

2 个答案: