Show HN: a small jQuery Form Validation library | Hacker News Reader

Show HN: a small jQuery Form Validation library

github.com

47 pointsjackfranklin30 comments

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...

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?

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

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

This change appears to have been pushed already. Can't fault the responsiveness!

{yes: 'please'}

I modelled it off the way CodeIgniter validations as I always liked how they worked - but thinking about it this is a great idea - going to make this change sometime soon :)

Thanks!

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.

> 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.

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.

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/

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...

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.

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

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".

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...

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

Like how angularjs works with directives? In angular you can create your own directives (HTML elements, so to say). You can add attributes to these directives. In this directive simply check if the browser supports the HTML5 element. if(this_is_true): render_this_element() else: mimic_behaviour().

https://github.com/pags/fields.js

Give it a look. As you described, it simply parses standard input tag params, including HTML 5 types. It's my first attempt at anything like this, so be gentle.

@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.

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.

...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?

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?

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.

That's a nice looking gem. I'd love to use it on some of my larger projects, but I don't like unwieldy... Can you share any specifics of what doesn't Just Work?

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.

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

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

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

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.

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

Reply on news.ycombinator.com