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 ?

score 60 · Accepted Answer · answered Apr 01 '14 at 13:06

60

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

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

Best

answered Apr 01 '14 at 13:06

guillaumepotier

7,369
8
45
72

3

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. – macloo Apr 13 '14 at 19:42
@macloo, their docs have "add data-parsley-validate to each
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
– ESR Jul 11 '17 at 04:30
1

@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 :) – guillaumepotier Jul 11 '17 at 09:18
var parsley = $('#form').parsley(); var validate = parsely.validate(); var isValid = parsley.isValid();. Very thanks to @guillaumepotier. – Ozal Zarbaliyev Feb 21 '19 at 08:34
1

@guillaumepotier , 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 – Oct 07 '20 at 06:43
@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 – guillaumepotier Oct 07 '20 at 07:59

score 7 · Answer 2 · edited Feb 10 '15 at 11:13

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

score 0 · Answer 3 · answered Jun 05 '19 at 14:42

0

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

answered Jun 05 '19 at 14:42

silly_girl

1
1

Trigger parsley validation without submit form?

3 Answers3

Linked