2

I need to be able to validate a form in Parsley on submit, but to delay the actual submission itself until some other (timed) action is completed.

I tried this:

$("#myform").on('submit', function(e){
    e.preventDefault();
    var form = $(this);

    form.parsley().validate();

    if (form.parsley().isValid()){

        // do something here...

        setTimeout(function() {
            form.submit();
        }, 3000);

    }
});

As you can probably guess, form.submit() just sends me into an infinite loop. I'm unable to determine how to trigger a submit after a delay without recalling the validation. To be clear, I need to:

  1. Check the form is valid
  2. Do something unrelated
  3. Wait X seconds
  4. Submit form

Any ideas? Is there a Parsley specific method that will submit the form without revalidating?

Luís Cruz
  • 14,780
  • 16
  • 68
  • 100
delinear
  • 2,745
  • 1
  • 10
  • 21

2 Answers2

0

As per this question once an action is canceled (with preventDefault()), the only option is to triggered it again.

You are already doing that. What you need to add to your logic is a condition to whether the event should be stopped or not. You could use something like this:

$(document).ready(function() {
  $("form").parsley();

  // By default, we won't submit the form.
  var submitForm = false;

  $("#myform").on('submit', function(e) {
    // If our variable is false, stop the default action. 
    // The first time 'submit' is triggered, we should prevent the default action
    if (!submitForm) {
      e.preventDefault();
    }
    var form = $(this);

    form.parsley().validate();

    // If the form is valid
    if (form.parsley().isValid()) {
      // Set the variable to true, so that when the 'submit' is triggered again, it doesn't
      // prevent the default action
      submitForm = true;
      // do something here...

      setTimeout(function() {
        // Trigger form submit
        form.submit();
      }, 3000);

    } else {
      // There could be times when the form is valid and then becames invalid. In these cases,
      // set the variable to false again.
      submitForm = false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form id="myform">
  <input type="text" name="field" required />
  <input type="submit" />
</form>
Community
  • 1
  • 1
Luís Cruz
  • 14,780
  • 16
  • 68
  • 100
  • 1
    Thanks Milz, that's effectively what I did. I wasn't sure if there was an internal method to pass through the submit event but it seems not, so I'm marking this as accepted since it solves the problem. – delinear Jun 04 '15 at 12:43
0

I'm actively working on an update that will handle promises, so what you want to achieve would be very easy to do.

In the meantime, it's harder to do. I think that with the remote version, you can send a submit event as follows:

$('.your-form').trigger($.extend($.Event('submit'), { parsley: true }))
Marc-André Lafortune
  • 78,216
  • 16
  • 166
  • 166