How to reset validation method on form when first input is focused? (jQuery Ajax Form Plugin + Magnific Popup)

Question

I am using jQuery Ajax Form Plugin alongside magnific popup plugin ajax type to display/update content when called upon.

I have this form:

<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>

The div class="form-message" displays an error if all fields are not yet completed and does not submit the form. On success, it removes the form from view and tells the user it has been completed. Then, another function removes the error message when the user focuses the first input.

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

The problem is, when the submit is unsuccessful and the user attempts to submit the form properly, the form will still post the error message instead of the success message.

I've tried

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

but this behavior resets the form when autocomplete is clicked, so the user can't ever complete the first field. I'm not even sure it is properly resetting it and that I won't get the same behavior mentioned before. Any idea how to accomplish this?

Answer 1

I would suggest to remove a test against the submit element changing this line:

 if (!formData[i].value) {

with:

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

The snippet:

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