Parsley.js validation not triggering

Question

I'm using Parsley.js to validate my form. I tell Parsley to monitor the form by adding...

<form data-validate="parsley" name="myform"> 

And my elements look like:

<input type="text" name="username" data-required="true"/>

If you neglect the required fields and attempt to submit the form using this button...

<input type="submit" value="Submit"/> 

Parsley displays an error and does not allow the form to be submitted. However, if you use the following submit method instead...

<a href="#" onClick="document.myform.submit();"> Submit </a> 

Parlsey simply ignores the errors and submits the form. What is going on? Is Parsley listening specifically to the input[type=submit] element rather than the submission of the form itself? (I need to make the "Submit" feature a link because I want to apply special styles to it.)

Answer 1

I'm not sure how parsley figures that it needs to validate, but you can always trigger validation yourself with document.myform.parsley( 'validate' ); , so in your case you'd have to do:

if (document.myform.parsley( 'validate' ))  
     {document.myform.submit();}

Answer 2

I would expect Parsley to have a on submit handler automatically, but until I find out from the source you can do this:

$('form#my-form').on "submit", (e)->
  $(this).parsley().validate()

Note that this is coffeescript. JS would be

$('form#my-form').on("submit", function(e) {
  return $(this).parsley().validate();
});

Of course all your inputs have to have the data attributes set such as:

data-parsley-required="true"