如何在第一个输入聚焦时重置表单上的验证方法？ （jQuery Ajax 表单插件 + Magnific Popup）

Question

我正在使用 jQuery Ajax Form Plugin 在需要时与 magnific popup plugin ajax type 到 display/update 内容一起。

我有这个表格：

<form method="post" action="/contact" id="contact_form">
    <div class="form-message"></div>
    <ul class="unstyled">
      <li>
        <label for="name">Name</label>
        {{ contact | contact_input: 'name' }}
      </li>
      <li>
        <label for="email">Email</label>
        {{ contact | contact_input: 'email' }}
      </li>
      <li>
        <label for="subject">Subject</label>
        {{ contact | contact_input: 'subject' }}
      </li>
      <li>
        <label for="message">Message</label>
        {{ contact | contact_input: 'message' }}
      </li>
      <li>
        <label for="captcha">Spam check</label>
        <p>Please enter the characters from the image.</p>
        <div>{{ contact.captcha }}</div>
        {{ contact | contact_input: 'captcha' }}
      </li>
      <li>
      <button id="validate" name="submit" type="submit">Submit</button>
      </li>
    </ul>

  </form>

div class="form-message" 如果所有字段尚未完成且未提交表单，则显示错误。成功时，它会从视图中删除表单并告诉用户它已完成。然后，另一个函数会在用户聚焦第一个输入时删除错误消息。

  $(document).on('click', '#validate', function () {

        $(this).closest('form').ajaxForm({
          beforeSubmit: validate,
        });

        function validate(formData) {
          for (var i = 0; i < formData.length; i++) {
            if (!formData[i].value) {
              $('.form-message').html('<p>Please enter a value for all related fields!<br/> The form has <strong>not</strong> been submitted</p>');
              return false;
            }
          }
          $('.form-message').html('<p>Your message has been sent</p>');
          $('#contact_form > ul').hide();
        }
      });


      $(document).on('focus', 'input#name', function () {
        $('.form-message').html(null);
      })

问题是，当提交不成功并且用户尝试正确提交表单时，表单仍将 post 错误消息而不是成功消息。

我试过了

$(document).on('focus', 'input#name', function () {
        // method from plugin to reset form
        $(this).closest('form').resetForm(); 
      })

但此行为会在单击自动完成时重置表单，因此用户永远无法完成第一个字段。我什至不确定它是否正确重置它并且我不会得到之前提到的相同行为。知道如何实现吗？

Answer 1

我建议删除针对更改此行的提交元素的测试：

 if (!formData[i].value) {

与：

if (!formData[i].value && formData[i].name != 'submit') {

片段：

$(document).on('click', '#validate', function () {
    $(this).closest('form').ajaxForm({
        beforeSubmit: validate,
    });

    function validate(formData, $form, options) {
        for (var i = 0; i < formData.length; i++) {
            if (!formData[i].value && formData[i].name != 'submit') {
                $('.form-message').html('<p>Please enter a value for all related fields!<br/> The form has <strong>not</strong> been submitted</p>');
                return false;
            }
        }
        $('.form-message').html('<p>Your message has been sent</p>');
        $('#contact_form > ul').hide();
    }
});

<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.form/4.3.0/jquery.form.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">

<form method="post" action="/contact" id="contact_form">
    <div class="form-message"></div>
    <ul class="unstyled">
        <li>
            <label for="name">Name</label>
            <input type="text" name="name" id="name">
        </li>
        <li>
            <label for="email">Email</label>
            <input type="text" name="email" id="email">
        </li>
        <li>
            <label for="subject">Subject</label>
            <input type="text" name="subject" id="subject">
        </li>
        <li>
            <label for="message">Message</label>
            <input type="text" name="message" id="message">
        </li>
        <li>
            <label for="captcha">Spam check</label>
            <p>Please enter the characters from the image.</p>
            <div>{{ contact.captcha }}</div>
            <input type="text" name="captcha" id="captcha">
        </li>
        <li>
            <button id="validate" name="submit" type="submit">Submit</button>
        </li>
    </ul>

</form>