Parsley pattern regex validation

Question

I wonder if anyone can help. I'm trying to use parsley.js in an incredibly basic form, and I'm getting random results!

Basically I've setup one input field that is mandatory (required) and must be between 1 and 10 characters long:

<form action="#" data-parsley-validate="true" method="get">

  <label for="name">Name</label>
  <input type="text" id="name" required="required" pattern="^.{1,10}$"/>
  <input type="submit" />
</form>

(don't worry about whether a name field should be longer than 10 characters - all I'm trying to do is get basic parsley validation working)

I have created a CodePen for this here http://codepen.io/megsterDotNet/pen/DErmu which hopefully demonstrates the problem.

The problem I get is that most times (but not all times!) it wont submit the form if you have corrected an error. So:

• Load the form, type in loads of characters into the name field (more than 10)
• Click out of the field, but not on the Submit button. Notice that the field does not get validated at this point.
• Click Submit. Notice that the field goes red and the error message appears.
• Now click into the field and delete characters from the end until you have less that 10 characters. Notice that there is a change in validation behaviour in that it is now validating as you type, because once you reach 10 characters or less the field goes green and the error message disappears.
• Now click Submit.
• Sometimes (and I would say its about 50/50), the form will submit as expected. The page re-renders with a blank form (because its a basic pen with no backend etc). Othertimes however the form does not submit at all. The field value stays as it was and the green highlight remains.

This behaviour seems flakey!

My thinking is that I must be doing something wrong - my example is such a simple use case I cant believe that parsley doesnt support it, or that its buggy. I must be doing something wrong ...

Any pointers with this would be very much appreciated,

Cheers

Nathan

Answer 1

I've found a partial solution - basically my markup in my test pen was causing the problem!

I had:

<form action="#" ...

The problem is the action attribute, and specifically the #
When the page initially loads (or when CodePen renders my test page in its iframe), the url does not have the hash. When I enter data that is too long then correct it, parsley allows the form to be submitted. The action of the form is #, so the url now has the # at the end of it. Subsequent form submissions are the ones that don't work!

Doh!, I should have known this!

Removing the action attribute in the pen has fixed it, and when I come to implement this in a real app, the action attribute will obviously be set to the end point of where I want data submitted to.

As mentioned, I consider this a partial solution. I can now see parsley preventing/allowing form submission when I want it to, and is consistent.
The part however that I don't consider consistent, and that the above does not fix, is the apparent change in UX/behavior. IE. on a fresh field parsley will validate when I click Submit. However, if the field has already got a validation error, it will validate as I type. Not sure I like that ....