当第一个输入集中时，如何在表单上重置验证方法？ jQuery Ajax表单插件+宏伟的弹出窗口

问题描述

我正在使用jQuery Ajax Form Plugin 与magnific popup plugin ajax type一起显示，以便在被调用时显示/更新内容。

我有这个表格：

<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);
      })

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

我尝试过

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

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

解决方法

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

 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>