
Parsley.js: never write a single JavaScript line to validate your forms - guillaumepotier
http://parsleyjs.org
======
jonnytran
Has anyone had any experience where adding or removing client-side validation
has affected conversion?

Other comments talked about client-side validation being mainly for UX and
user convenience. But I'm wondering if it has a noticeable effect on whether
or not people actually submit the form all the way to completion (i.e. no
errors).

I made a tool that I have server-side form validation. I found that saving the
invalid input so that I could examine it later was extremely valuable in
understanding what people were entering, so that I could make the tool
smarter. A good example is like with Parsley's demo where it requires
<http://> for the website URL. After seeing that people tried to enter URLs
without <http://>, I knew I could change my code to automatically infer it.
<http://> is obvious, but a lot of times, people will surprise you. I don't
have stats, but presumably this kind of change increases conversion. I realize
this anecdote is a different effect than what I'm asking about client-side
validation.

~~~
mariocesar
What about a hook where every time a user makes a mistake it sends the related
data to a centralized location.

I can envision that could be easily to push this to Sentry
<https://getsentry.com/welcome/> using the Sentry Javascript Client

~~~
kaliblack
You can do the same thing with Google Analytics events. Use a non-interactive
event with "form validation" as category, field name as action and entered
value as label. You may miss some events based on the service limits, but the
common trends will be obvious.

------
jiggy2011
This is a clean way to solve the low hanging fruit of form validation, stuff
like isItAnEmailAddress().

What I always find messy in web frameworks is doing validations which are more
complicated.

For example a radio button choice which hides another form element which would
otherwise be mandatory but should now not be filled in at all. Or where
supplying a value between certain dates changes another date field from
optional to mandatory and also must check that these dates are between certain
values dictated by the first date field.

~~~
chime
For one of my new projects, that is precisely what I am doing - making it
possible to define complicated validation rules in a simple manner (and lots
more). Would there be interest if we open-source it?

~~~
jiggy2011
Quite possibly.

Though I'm not sure how much this could be generalised since complex
validation rules are effectively computer programs in themselves.

Not sure what your approach to this problem is, but perhaps one way to do it
would be a validation engine that is inherently functional by design.

Of course, ideally it should be something that can plug in to popular web
frameworks easily.

~~~
ryaf
Data binding solves this generically. It allows you to build state machine
trivially Stuff like angular and ember do this amazingly well though it would
be nice to have a nice standalone library. (no idea if one exists)

------
mobweb
Looks cool, but the demo right at the top of the "examples" page has two
things that IMHO aren't as "UX aware" as described on the landing page:

\- The "website" field requires the <http://> part of the address \- After
typing three letters into the "message" fieldarea, an error pops up and tells
me the message needs to be at least 20 characters long, while I'm still typing
away

I realize this could be tweaked by the user but the demo shouldn't have such
logical flaws for a script that's described as "Super #UX focused". ;)

~~~
guillaumepotier
Right. The demo form is totally UX un-aware! :)

------
robomartin
This is neat.

A couple of points:

1- Client side validation is easy to circumvent. If you use this you have to
make sure it is for UI only and that the real validation happens server side.

2- Using regex for email validation is fraught with issues. Probably the most
salient one is that there are a million expressions out there. People run a
quick google search, grab one and move on without knowing what they just
plugged into their code. This particular tool will, for example, pass
"m@apple.comm" as valid.

Other than that, I am sure this is a great time saver.

~~~
dinkumthinkum
1\. I agree, of course. Surely, everyone knows this right?

2\. True, but you have to do something. :) What exactly is wrong with
m@apple.comm? That could be valid domain at some point, right? You could
filter those out but it's almost a preference sort of question. Does anyone
think it would make sense to have "warning" level of validation for email
addresses and let the user decide on these sort of examples? Just throwing it
out there.

~~~
jiggy2011
To fix that, you can do a DNS lookup and check the domain has a valid MX
record.

~~~
iambibhas
HTTP calls for client side validation? That's a great idea!

~~~
optymizer
"This username has already been taken."

------
adamdicarlo
Why use <input type="text" data-type="email"> rather than... <input
type="email"> ? You're already using HTML5 data attributes, so why not use
HTML5 input types? Added benefit is that the browser also has an idea of what
kind of data goes there - this helps on mobile devices especially, where email
fields won't auto-capitalize and might include extra buttons like the ".com"
button and "@" right on the normal keyboard.

~~~
guillaumepotier
Right.

jQuery/Zepto $.data() was fast and easy to implement, rather than searching
html5 attr.

I'll think about that ;)

~~~
akoeberle
It shouldn't be that hard to use a attribute instead: var data = $( self
).attr(type);

------
Tloewald
Nice.

Improve the demo by removing spellcheck from the name field and capitalizaton
for ios (and likely other touch devices) where appropriate.

Along the same lines, demonstrate phone number field (number formatting),
currency field, and automatically dealing with urls more nicely.

------
st3fan
Speaking with my security hat on: This is a really nice library, but you also
do the same validations server side right?

~~~
why-el
Great question. I would usually prefer server side validation, and with the
nice integration that Rails provides between form errors and validations on
the model, I am not sure how I can use this. Does anybody who uses a Rails
stack combine both server side and client side validations?

~~~
lnanek2
I thought it was standard to have both. Server side validation to keep bad
data out and client side validation to provide a nicer UX for the user than a
complete page reload and them searching around for what went wrong.

~~~
dinkumthinkum
Yeah, for some reason people always bring up server side validation on these
kinds of posts about client side validation ... doesn't server side validation
go without saying?

~~~
vidarh
You'd _think_ it goes without saying, but I've seen enough code where people
didn't. Including code where the client side JS validation was pretty much a
guide to hacking the site (trying in vain to protect against SQL injection
attacks in one of the most horrific examples, where the SQL injection checks
essentially told you exactly what to try to post directly to their server...)

------
5vforest
This is fantastic. The jQuery Validation plugin has needed a successor for a
long, long time.

~~~
wheaties
Yes but then we need all the different validation methods that come with it. I
use phoneUS and the like, I don't want to give that up.

~~~
guillaumepotier
They'll come don't worry ;)

~~~
wheaties
Alright. Give us an example of how to make them and I'll fork, patch, and pull
request.

------
hazz
The url validation seems a bit strict, requiring "<http://> at the start. No
one types that these days, and I think in practice it might be a real
roadblock for less computer literate users. I notice also that "ftp://" is
valid, but not other protocols like, say, "afp://" or "git://".

Other than that, great job! I'm actually really looking forward to using this
in my next project - form validation is usually such a pain.

~~~
guillaumepotier
I'll take a look to url RegExp validation rule ;)

------
thomseddon
The implementation just smacks of AngularJS. In fact, implementing something
like this would be just short of trivial using Angular...!

If you like the concept of "extending html" as used here then you should
probably checkout AngularJS: <http://angularjs.org>

~~~
guillaumepotier
Sometimes you just don't have or don't need angular or other js framework and
just simply want to validate a form ;)

~~~
thomseddon
Yes quite, it is nice that is framework independent.

------
joseph_cooney
Looks very similar to the unobtrusive validation used in ASP.NET MVC (which in
turn relies on jQuery validation) although this does seem to add richer
configuration of behaviour (such as when the validation is triggered etc.)

from here:
[http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-...](http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-
validation.html) <input class="text-box single-line" data-val="true" data-val-
length="The field LastName must be a string with a maximum length of 60."
data-val-length-max="60" data-val-required="The LastName field is required."
id="LastName" name="LastName" type="text" value="" /> <span class="field-
validation-valid" data-valmsg-for="LastName" data-valmsg-
replace="true"></span>

------
truebosko
I suppose this is more suited to when your models and schema are also defined
on the client side?

Having just hit this situation (validating a form client-side), I found the
best solution was to transport the form schema from the server (because I use
Django, I can easily whip up a ModelForm), then push that into a simple
Javascript Form object which renders the schema and adds validation. Maybe
there's better ways, but that's what worked for me. Curious what others have
done .. :-)

~~~
pestaa
Nice to have a full-blown client-side equivalent of schema definitions and
validation rules, but for most of my forms, I just add it quickly and dirty.
Sometimes it feels bad, but most web toolkits treat JavaScript as a second-
class citizen and not an integrated part of its core (and no, throwing in a
jQuery does not count).

Yii framework (PHP) supports validation through Ajax (serializes the form,
sends for regular server-side validation and displays the errors on the form).
A godsend if your form does not change, and impossible to work with if it is
dynamic (consider batch entries with "Add line" features, etc.).

I haven't seen a seamless integration on this higher level.

~~~
phpnode
Yii can also do client side validation (without an ajax call) for most of its
built in validation rules.

------
rickharrison
This library looks great! I really like the functionality and the html
requirement definitions.

I don't want to hijack, but I just want to link to the form library I wrote a
couple years ago. It has a little less functionality, but it is a little
lighter and has no dependencies. It is here:
<https://github.com/rickharrison/validate.js>

~~~
chewxy
Hey! I use that! Thank you for validate.js. validate.js + humanize.js works
very well (but this morning I was considering using parsley.js. I'll evaluate
it over the weekend I guess)

------
niyazpk
Very nicely done. Beat me to it. :(

I am working on a library which takes a data definition, renders the form and
then validates it before submitting it via ajax. It supports various hooks
like manipulate the data before submission etc.

IMHO form rendering (in a standard way) is also a common pain point along with
form validation. Anyone interested in this type of library? Any inputs will be
highly appreciated.

------
adorable
Great. How about internationalization? Do you allow to replace the english
error messages with messages in other languages?

~~~
znt
That is what I came here to ask. Is there way to define the error messages
somewhere, per language?

~~~
guillaumepotier
Yes, not very handy currently, but you could override all messages in Parsley
constructor on each form..

I'll look definitely into a more handy solution soon :)

~~~
ialex
i18n is a must for most projects to use it :D, we would love that.

------
HugoDias
I suggest you do add this on cdnjs ;) <https://github.com/cdnjs/cdnjs>

------
baggachipz
Typo in the "Super Free" section on the home page: s/developped/developed

~~~
guillaumepotier
thx! will fix that :)

------
d0m
Very good, I'll give it a fair try in my next project.

------
tantalor
"DOM-API" is redundant, as the DOM is an API.

------
durkie
thanks so much! very excited to use this in a project we're working on.

------
phatbyte
Loved this

------
cobalt2760
Nice lib!

