javascript - 如何防止提交表单后显示“请填写此字段”工具提示

Question

点击提交按钮后，我正在尝试清除表单中输入字段中的所有数据。这工作正常，但Please Fill Out This Field点击提交后会出现一个烦人的工具提示：

          $(document).ready(function(){
            $(".product-suggestion-form-container").click(function(){
              $(".form-div-top").slideToggle();
              $(".dropdown-arrow-top").toggle();
              $(".dropdown-arrow-up-top").toggle();
            })
          });
          $(document).ready(function(){
            $(".contact-us-form-container").click(function(){
              $(".form-div-bottom").slideToggle();
              $(".dropdown-arrow-bottom").toggle();
              $(".dropdown-arrow-up-bottom").toggle();
            })
          });
          function clearTopForm() {
            $(".form-div-inner-top")[0].reset();
            // return false;
            // $('.form-div-inner-top').children('input').val('')
            // document.forms['.form-div-inner-top'].reset()
            // document.getElementById('input-group-name').value='';
            // document.getElementById('input-group-email-address').value='';
            // document.getElementById('description-of-product-desired').value='';
          }

.form-div-top {
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
  border-top: none !important;
  padding: 15px;
}

.form-div-top-active {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}

.submit-button-1,
.submit-button-2 {
  background-color: #f3c45c;
  border-radius: 3px;
  border: none;
  font-family: "Proxima Nova Bold";
  padding: 5px 15px;
}

.submit-button-1:hover,
.submit-button-2:hover {
  background-color: #ddad4e;
  transition: 0.5s ease-in-out;
}

.submit-button-1 {
  margin-top: 5px;
}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-div-top">
            <form class="form-div-inner-top">
              <span class="input-group" id="input-group-name">
                <input type="text" placeholder="Name *" class="form-input" required></input>
              </span>
              <span class="input-group" id ="input-group-email-address">
                <input type="text" placeholder="Email Address *" class="form-input" required></input>
              </span>
              <span class="input-group" id="description-of-product-desired">
                <input type="textarea" placeholder="Description of product desired *" class="form-input" required></input>
              </span>
              <div class="submit-button-container">
                <button class="submit-button-1" onclick="clearTopForm()">Submit</button>
              </div>
            </form>
          </div>

你会注意到我在 jQuery 中尝试过的其他一些事情：

$('.form-div-inner-top').children('input').val('')

document.forms['.form-div-inner-top'].reset()

document.getElementById('input-group-name').value='';

document.getElementById('input-group-email-address').value='';

document.getElementById('description-of-product-desired').value='';

但是它们都被注释掉了，因为它们都没有工作。

如果有其他方法可以清除form-div-inner-top表单中的输入字段，请推荐。也许有另一种方式不会导致工具提示显示，或者某种prevent选项会阻止它完全显示。

编辑：当然，使用novalidate将不起作用，因为表单仍然必须有效 - 必须填写所有必填字段才能提交。

编辑2：除此之外，我认为有问题$(".form-div-inner-top")[0].reset();，因为必须填写所有字段才能点击提交。现在，您可以在不填写所有必填字段的情况下点击提交，然后这些字段就会被清除。

标签： javascripthtmljquerycss