7th June 2016

jQuery Form Validator

jQuery Form Validator

Recently I had to add some client side validation to a form, after some research I came across one jquery plugin that I particularly liked.

It is called formvalidator (http://www.formvalidator.net/), it has some good functions however I couldn't get it to do two things that I needed.

1. I needed the ability for when a page loaded for it to validate data that already existed in a field, below is an example of how to do this.

I created a new function and then when once the modules have loaded then it will call my function, I had to set a timeout and then call blur on the element so that form validator would realise that there is a value and therefore validate it.

2. Form validator has a built in Password confirmation, however at the time it would not work with my elements (this may now have been resolved). This was due to using two asp:TextBox's

Here is what my HTML looked like.

So my solution to this problem was to write my own custom validator, see below for an example.

One limitation of the code below is that it has to be on the same page as the id for confId, however this wasn't an issue for me as I only needed this on the one page, however when I need it on two pages I shall refactor it so that it will pull this id from a data attribute from the current element.

I hope that the above was useful, if you have any questions or suggestions then I would like to hear from you!

Fill in this quick form and discover your digital future
Choose your interests:

Where to find us

We'd love to welcome you into our office! We're only 20 miles north of Peterborough, conveniently just off the A16.

Carver House
Apex Court, Elsoms Way
PE11 3UL