Поля формы не становятся пустыми / сбрасываются, когда мы щелкаем за пределами формы

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

"... мы щелкаем за пределами поля формы, но поля формы не становятся пустыми."

Если вы хотите очистить форму при щелчке за пределами поля формы, вы можете написать обработчик событий, который сбрасывает форму, когда вы щелкаете за ее пределами.

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

Answer 2

Вы можете создать функцию js, которую вы можете вызывать, например, с помощью кнопки, и это сбрасывает все входные данные формы.

<button class="button" type="button" onclick="Reset();">Reset</button>

function Reset() {
    document.getElementById("schedule-demo").reset();
}