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.
data-dyn-group-error="Ops! At least one contact number should be present"
<input id="mobile-number" type="text">
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.