Trigger parsley validation without submit form?

Question

Given this code, it never works and always returns true whatsoever ?

<form id="my-form" data-validate="parsley">
  <p>
    <label for="username">Username * :</label>
    <input type="text" id="username" name="username" data-required="true" >
  </p>

  <p>
    <label for="email">Email Address * :</label>
    <input type="text" id="email" name="email" data-required="true" >
  </p>

  <br/>

  <!-- Validate all the form fields by clicking this button -->
  <a class="btn btn-danger" id="validate" >Validate All</a>
</form>

<script>
var $form = $('#my-form');
$('#validate').click (function () {
    if ( $form.parsley('validate') )
      console.log ( 'valid' ); <-- always goes here
    else
      console.log ('invalid');
});

</script>

So my question is if there is a way to trigger parsley validation without adding a submit button ?

Tradesman

Answer 1

$form.parsley('validate') is 1.x API. It was deprecated in 2.x versions you might use.

Try $form.parsley().validate() instead.

Best

Woolworth

I've been having difficulty finding clear (or verbose) Parsley documentation, and not always sure whether it's 1.x or 2.x. Thanks for this. – Asbury

@macloo, their docs have "add data-parsley-validate to each <form> you want to be validated", then a few lines below in big red letters "Do not add data-parsley-validate to your forms". o_O – Peroneus

@EdmundReed hi, the big red paragraph "do nto add data-parsley-validate" only concern the javascript usage. If you bind parsley in javascript, adding these DOM attributes will mess the things up. This might be not really clear in the doc, but it has some logic :) – Woolworth

var parsley = $('#form').parsley(); var validate = parsely.validate(); var isValid = parsley.isValid();. Very thanks to @guillaumepotier. – Emphatic

@Woolworth , hello Guillaume, I know this is an old post but how do you trigger an immediate re-check of a calendar/date script ( jQuery Calendars Datepicker)? The field does not work with a keyup. I tried the trigger after failure with mouse move but it only works if user moves over that particular field. Thanks – Eisenstark

@saleem I cannot answer that without code. Please open a distinct SO issue for that. My guess is that your calendar/date script should have an API / a callback called once a change is done (this is the job of your calendar/date script), and then in this callback, call parsley for validation. Best – Woolworth

Answer 2

I've been searching high and low to try and make the form validation work with a non-form tag. I guess my biggest gripe with the framework is that it doesn't work out-of-the-box with non-form elements. I would be ok using a form element if it didn't scroll to the top of the page every time it tries to validate. Because this behavior is inherent in how form works, there is only this hack to fix it.

Just as a side note, using data-parsley-validate attribute on the div tag also works. You can also initialise the form as normal (meaning you can subscribe to the validation).

example html:

<div id="signupForm" data-parsley-validate>
    ... put form inputs here ...
    <button id="signupBtn">Sign me up</button>
</div>

Just make sure to put js in:

var $selector = $('#signupForm'),
    form = $selector.parsley();

form.subscribe('parsley:form:success', function (e) {
    ...
});

$selector.find('button').click(function () {
    form.validate();
});

Calabash

Answer 3

if you put type="button" on the button, it won't refresh and scroll to top of page when clicked.

Questa