This article about my recent work I have done in creating a JavaScript based HTML form validation library.

Recently I’ve started to work on an open source JavaScript project. Before I dive into tell you about the project, here is some background context.

At my current company, we have a web application. One of the pages of that web application has a lot of HTML forms. One day the QA team was keen on improving the validation of the forms on the client-side. However that request came as as part of some other work. As the validation that was expected was a bit complex, we didn’t proceed with the implementation. One reason was that the functionality was good to have and also it would take a significant time to write custom JavaScript code to handle all the forms in that page individually.

However after that, it got me thinking. I was thinking to have a JavaScript library that you can use to easily integrate so that with little coding you can apply different validation requirements for the forms.

The think I didn’t like was also JavaScript. So I wanted to make sure that developer who use my library will type absolute minimum amount of JavaScript or none at all.

Design thoughts… 

So if the developer would not use JavaScript to implement logic, another option was to use HTML. My idea was to make use of HTML data attributes but make the attributes meaningful enough so that my looking at it you should be able to get a sense of what is happening.

The thing with data attributes is you can have your own custom attributes.

After a bit of trial and error trying different syntax for the data attributes, I ended up using data-dyn... format for the custom data attributes. dyn is used as the namespace for data attributes for the library to reduce or omit collisions with other odes that use data attributes. I would use this data attribute in an <input> tag to add custom validation functionality for that input field.

The power resides in the ... part of the attributes. This part can be made up of multiple words separated by ‘-‘ or a single word. A single word would most likely to be a special identifier. In other words, a special attribute can be for example name which is used to assign a name value to be used by the library when it want to render an error message. The library can interpret this to expand its knowledge about the input field.

The rest of the fields can define a validation and also set properties of the validation.

For example, lets say you have two input fields but either one of them is mandatory. A real example would be a form asking for a land number and a mobile number. The form at least needs one number.

To use the library, you can think them as a set of input fields belongs to a single group. There is a validation called ‘group’ validator. You can utilise this validator to say you need to have at least one value for the group. So in the form you can have the two inputs with following syntax. Notice the way the data-dyn-... attributes are used.

Whats next?

You can find the open source project on my Github account at: https://github.com/sinaru/DynamoForms

I welcome any suggestion and collaboration wholeheartedly. If you like to contribute in anyway, please get in touch with me on GitHub.