Validate form on submit only using parsley.js

Question

I have a simple form

<form action="#" method="GET" class="parsleyVal">
  <div class="input-group input-group-lg">
    <input type="email" name="email" class="form-control input-email" 
           placeholder="Enter your email"  
           data-parsley-required-message="Please enter your email address" 
           data-parsley-required title="Please enter your email address" 
           auto-complete="off" data-parsley-trigger="submit" />
    <span class="input-group-btn">
      <button class="btn btn-orange" type="submit"  data-parsley-trigger="click touch">
        Sign up
      </button>        
    </span>
  </div>
</form>

Validation starts when the sign-up button is clicked.

However, if there is no email specified, an error is shown:

enter your email.

When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.

I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.

I have tried xCodexInlinexPlacexHolderx on the input field - does not help.

Answer 1

Looks like I finally figured out what I wanted.

Might be not ideal way to do it, if anyone could recommend something else.

$('.parsleyVal input[type=email]').on('keyup keydown', function () {
            $('.filled').removeClass('filled');
            $('.parsleyVal').parsley().destroy();
        })

Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.

Answer 2

You can control what triggers the validation with two different settings:

data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit

data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.

The setting you need is: data-parsley-trigger-after-failure

Example:

<input type="email" id="profile-email" 
                    data-parsley-required="true" 
                    data-parsley-trigger-after-failure="submit"/>