Adventures in Validation
When it comes to validation there are many avenues one may take. You can use something as simple as an if statement or you can import a whole library to do the job for you. In my case, I played around with Validate.js and Parsley. Both Validate.js and Parsley are validation libraries for JavaScript that each have their own advantages and disadvantages. Given the short time frame I was given I was only able to explore surface level implementation.
When it comes to plug and play Validate.js seems to be the go-to. Due to it having no dependencies, all one has to do is include the CDN and you’re all set. To use Validate.js properly, one must start by declaring an object usually named constraints. The constraints object contains most of the validation options you want to include.
Taking a look at the example image, the constraints object contains the credit card number object. Within the credit card object you can define certain parameters that will then be referenced when calling the object later. For example, we have presence: true. This indicates that the input field must require input.
In regards to our project, all I required was that the zip code’s presence was true and that the length was equal to 5. Implementing was certainly a challenge. I tried following the documentation’s examples to apply proper validation to our input field with no success. After meeting error after error and sinking roughly 2 hours into reading and trying to implement its built-in functions, I gave up using it. That’s when I came across…
Now Parsley is amazingly simple to use. To start one must download the appropriate CSS and JS files. After properly linking the script to the html, you are all good to go. To initialize it you must include the attribute data-parsley-validate to all the forms you want to apply validation to.
In the example above you can see that each input includes a couple unfamiliar attributes. Without going too in-depth each attribute contains certain parameters that the input field must contain. One example might be “data-parsley-maxlength” to set a max length to the input field. But that’s just the tip of the iceberg.
Looking at all the neat features of Parsley, I figured it would be the one that I would eventually use for the project. But as I kept on reading the documentation, I thought to myself, “Does one simple input field for a zip code need all this work?” and after deliberating I ultimately decided that it didn’t.
So in conclusion, Validate.js, while an incredibly easy to implement library, was too unnecessarily complicated for one input field. Parsley, on the other hand was an incredibly fun and easy to use library that ultimately felt like overkill when it came to applying it to one single input field. Sometimes the best validation is a simple conditional.
