当我们单击表单外面时，表单字段不会变得空白/重置

Question

当我们在输入字段中编写某些内容，然后不想提交表单，我们单击表单框外，但表单字段没有空白。我希望他们在不刷新网页的情况下打开表单时重置为空白字段。PS：表格是弹出式形式

表格的代码：

$(function(){
$("#schedule-demo").validate({
    rules: {
      firstname: 'required',
      lastname: 'required',
      email: {
        required: true,
        email: true,
      },
      phone : { required: true, minlength: 7 }
    },
    submitHandler: function(form, event) {
      submitInformationForm(form);
      event.preventDefault();
      return false;
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
  <p>Please provide us your contact information and the expert will reach out shortly.</p>
  <div class="form-group">
    <label for="demo-first-name">First Name *</label>
    <input type="text" name="firstname" class="form-control" id="demo-first-name">
  </div>
  <div class="form-group">
    <label for="demo-last-name">Last Name *</label>
    <input type="text" name="lastname" class="form-control" id="demo-last-name">
  </div>
  <div class="form-group">
    <label for="demo-email">Work Email *</label>
    <input type="email" name="email" class="form-control" id="demo-email">
  </div>
  <div class="form-group">
    <label for="demo-phone">Phone Number *</label>
    <input type="text" name="phone" class="form-control" id="demo-phone">
  </div>
  <div class="button-group">
    <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
  </div>
</form>

Answer 1

您可以创建一个可以用按钮调用的JS函数，然后将所有形式的输入重置。

<button class="button" type="button" onclick="Reset();">Reset</button>
function Reset() {
    document.getElementById("schedule-demo").reset();
}

Answer 2

" ...我们单击表单框外，但表单字段没有空白。"

如果您想在单击表单框外单击表格，则可以编写一个事件处理程序，该事件处理程序在单击外面时重置表格。

$(document).on('click', function(e) {
    var container = $('#schedule-demo');
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(container).validate().resetForm();
        $(container).get(0).reset();
    };
});

.resetForm()由jQuery Validate插件提供以重置所有验证。.get(0).reset()将清除表格的内容。

$(function() {
  $("#schedule-demo").validate({
    rules: {
      firstname: 'required',
      lastname: 'required',
      email: {
        required: true,
        email: true,
      },
      phone: {
        required: true,
        minlength: 7
      }
    },
    submitHandler: function(form) {
      // submitInformationForm(form);  // commented out for demo
      return false;
    }
  });
  $(document).on('click', function(e) {
    var container = $('#schedule-demo');
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(container).validate().resetForm();
      $(container).get(0).reset();
    };
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
  <p>Please provide us your contact information and the expert will reach out shortly.</p>
  <div class="form-group">
    <label for="demo-first-name">First Name *</label>
    <input type="text" name="firstname" class="form-control" id="demo-first-name">
  </div>
  <div class="form-group">
    <label for="demo-last-name">Last Name *</label>
    <input type="text" name="lastname" class="form-control" id="demo-last-name">
  </div>
  <div class="form-group">
    <label for="demo-email">Work Email *</label>
    <input type="email" name="email" class="form-control" id="demo-email">
  </div>
  <div class="form-group">
    <label for="demo-phone">Phone Number *</label>
    <input type="text" name="phone" class="form-control" id="demo-phone">
  </div>
  <div class="button-group">
    <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
  </div>
</form>
<button>click outside of container</button>

---

作为旁注...

submitHandler: function(form, event) {
    submitInformationForm(form);
    event.preventDefault();
    return false;
}

使用submitHandler功能内部的preventDefault()完全毫无意义，因为插件开发人员不提供默认的event来防止。

submitHandler: function(form) {
    submitInformationForm(form);
    return false;
}