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 ?

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

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

Answer 3

如果你在按钮上放置type =“button”，它将不会刷新并在单击时滚动到页面顶部。