Question

当我们在输入字段中写一些东西然后不想提交表单时，我们在表单框外单击，但是表单字段不会空白。我希望他们在打开表单时无需刷新网页即可将其重置为空白字段。附言：该表单是一个弹出表单

该表格的代码：

$(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;
}

在preventDefault()函数内部使用submitHandler是完全没有意义的，因为插件开发人员没有提供默认的event来防止。

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

当我们在表单外部单击时，表单字段不会变为空白/重置

2 个答案: