

Show HN: a small jQuery Form Validation library - jackfranklin
https://github.com/jackfranklin/jQuery-Form-Validator

======
gildas
If I had to make a choice, I'd prefer to use a polyfill [1] implementing the
constraint validation API [2] instead of using a proprietary API.

[1] <http://afarkas.github.com/webshim/demos/demos/webforms.html>

[2] [https://developer.mozilla.org/en-
US/docs/HTML/HTML5/Constrai...](https://developer.mozilla.org/en-
US/docs/HTML/HTML5/Constraint_validation)

------
evx
Neat. But I don't understand why you used strings as part of the validation?

The "min_length(6)|required" isn't actual javascript code is it?

Would passing an object be better?

For example,

userForm.addValidation("username", "min_length(6)|required");

Becomes,

userForm.addValidation("username", {min_length:6, required:true});

Did I misunderstand something?

~~~
jackfranklin
Hey,

Thank you so much for this. I've no idea why I didn't think of this initially
- but I've now rewritten the plugin to do this instead. Hope you like it - and
thanks again!

Jack

~~~
evx
Great job! Gotta love the responsiveness. I hope you keep making it better.

------
malandrew
What I don't get is why people still tie something like validation to jQuery.
I guess it's nice for the most trivial of applications and web usages, but
it's not really a great choice architecturally. Ideally you should create a
great multipurpose validation library that does nothing but validation and
then you create a second mini-library that encapsulates your validation
library and connects it to jQuery and chainable.

Everytime someone releases a library that is jQuery only, you've reduced the
utility of that library in a lot of use cases. Not only that, as awesome as
jQuery was, we're now entering an age where it's better to have separate
libraries for each task (e.g. a library that only does XHR and does it well
like TJH's SuperAgent) instead of one large slow moving monolithic library.

NPM as a package manager has done so much to make the javascript community
vibrant on the server-side and we need to see more of the many solid single-
purpose libraries on the client-side too.

~~~
theyshookhands
> Ideally you should create a great multipurpose validation library that does
> nothing but validation and then you create a second mini-library that
> encapsulates your validation library and connects it to jQuery and
> chainable.

Can you expand on this? I was hoping to implement a custom valildation library
as I am also unhappy with $.validate(). Any links would be helpful, too.

~~~
malandrew
First off, to do this right you should ideally be using a module system on
your front end. Something like CommonJS, RequireJS or Almond.js are all
acceptable choices.

Then for validation, you should create a validation with interfaces/apis
similar to something like underscore.string.js. It should basically validate
the content of form inputs, which will usually be strings and numbers. These
functions should know absolutely nothing about the DOM or client-side
javascript. They should only know about the data you are interested in.

Building your validation library like this means it can be used in at least
three different ways: (1) use like the library being discussed in this thread
(2) use at the model layer on the client-side with a framework like
backbone.js or angular.js for examples (3) use on the server side if you are
using something like node.js that allows javascript execution.

Now once you have that general purpose data validation library, you can
achieve use (1) by coupling it with a tiny adapter library via the module
system of your choice. In this adapter library you
require(your_validation_library) as a local var and then create a chainable
jQuery interface that takes the `this` variable which is usually bound to the
element currently being processed when creating a jquery plugin and pipes the
val() of that element to the appropriate function in your validation library.

One way to do this is to have a one to one mapping between some DOM attribute
value (like a classname or a custom data attribute like data-validation) and
the functions in your validation library. With this approach, you get that
attribute value from `this` and use a hashmap to determine what validation
function (or functions if your hash map contsains arrays of function names as
the value in the k-v pairs) is appropriate.

------
SoftwareMaven
Rather than make me define the submit handler, I would prefer to define
"onValid" and "onInvalid" handlers. That would make the code more DRY, since
that's code that will get duplicated on every form.

I also like the idea of using HTML5 attributes (see this[1] tutorial for a
starting point). I could easily see a place for a "add html5 validation to
every browser" where your plugin provides the backwards compatibility. In
fact, I might prefer to be able to use standard markup but not have to worry
that I'll get different behavior on different browsers.

1\. <http://www.the-art-of-web.com/html/html5-form-validation/>

------
mediumdeviation
In your example,

    
    
      $("ul").html("");
    

can be replaced with

    
    
      $("ul").empty();
    

The _replacePlaceholdersInMessage_ function uses replace with string as the
match, which means that in rare cases where more than one %F is present, for
instance, only the first will be replaced. To fix this you have to pass in a
new RegExp object with the 'g' (global) flag instead. See
[https://developer.mozilla.org/en-
US/docs/JavaScript/Referenc...](https://developer.mozilla.org/en-
US/docs/JavaScript/Reference/Global_Objects/RegExp)

------
jfaucett
Nice!! I'm always glad to see someone expanding the jq lib universe :)
Anyways, I know its in the early days but I'd definately suggest adding
localization as a high priority next step. Here in europe, i'm always at a
bare minimum of two languages on every form I make, so when frontend libs are
hardcoded with one lang I can't use them. You might already know about it but
for a howto on localization check out this other jq form validator
(<https://github.com/jzaefferer/jquery-validation>).

Overall, good job! Lastly, I'd also suggest allowing option passing via
$.extend.

------
dokem
Nice library. I wrote a small jQuery form validation library called Chackmate
[1] for a project I was recently working on. I think the reason that so many
end up writing their own validation library, despite that fact that there are
so many already out there, is because everyone wants to handle the validation
a little differently. Form validation is something where it's arguably more
effective in the long run to roll-your-own rather than learn someone else's
code.

[1] <https://github.com/reidHoruff/Checkmate>

------
waxjar
I'd prefer a library that reads its parameters from HTML5 attributes (such as
required, maxlength, pattern, etc). That would bring support for client side
form validation to browsers that don't natively support it. Ideally this would
be as simple as loading a javascript file with <script> tags.

It would also be much easier to use, because there would be no API to "learn".

~~~
th
This is a great idea. It looks like there are at least two plugins already
that claim to validate the new HTML5 attributes: [html5-form][1] and
[h5Validate][2]

[1]: [http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-
vali...](http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-
html5.html)

[2]: <http://ericleads.com/h5validate/>

------
evx
@jackfranklin I know you probably just haven't gotten to it yet but for the
sake of completeness, on the readme you can change the 'Validation Methods'
section to show the validation object structure rather than method names with
brackets.

------
Tyr42
Be careful with Client Side Validation, because you can't trust the client. So
this will help in displaying error messages faster for users, but you cannot
assume that anything submitted to the server has actually been validated.

~~~
barefoot
...which means you really ought to have the same rules in effect on both the
client and server. With a large number of forms this can lead to some ugly
maintenance issues.

How do other developers solve this problem?

I've found a very practical solution on the .NET side of things is to use data
annotations with MVC - which allows you to markup your model with metadata
describing the shape of acceptable data and have it automagically validated on
both client and server - but haven't found anything similar in PHP and other
languages. Any recommendations?

~~~
rgbrgb
I've been using this for a new rails app:
<https://github.com/bcardarella/client_side_validations>

It does basically what you describe, but once you combine it with some other
gems and add in some non-standard validations, it seems to get a bit unwieldy.
I'm newish to rails but it makes me pine for Node.js, where I could literally
just run the same validations on the client and server. Do any rails gurus
know if this is best practice?

~~~
bcardarella
I'm the author. I'd be interested to know which libraries you have combined
with it and have had issues? Have you opened up any issues on Github about
these libraries?

And what are the "non-standard validations"? If you are referring to custom
validations that you wrote then you'll have to write the supporting javascript
validation.

------
SquareWheel
Neato. I've been wanting to write a similar library for some time, though with
duplicated functionality in PHP for server-side checking. Can't trust the
client and all that.

As waxjar says I think it would make more sense to use attributes from the
field itself.

------
nathanpc
Awesome library. I'll start using this on my next projects. Thanks very much!

~~~
jackfranklin
Thanks! There is still plenty I'd like to do and improve on, still early days,
but I hope it's useful :)

------
tknew
is it possible to make the same library but without having to touch javascript
? putting html5 parameters to describe the validation instead. please :)

------
calgaryeng
I am having all kinds of troubles getting the client_side_validation gem to
work nicely with SimpleForm & bootstrap so I may give this a look.

~~~
bcardarella
What issues are you having? I'm happy to help resolve them

