DynamoForms

Make your HTML forms super smart only with HTML.

DynamoForms is a JavaScript library that uses HTML syntax to provide dynamic and advance form validation for your web pages.

User Guide: https://sinaru.github.io/DynamoForms/

Installation

You can either use dynamo-forms.js or dynamo-forms.min.js found in dist folder. Then add .dynamo-forms css class to each
<form> you want to validate.

In the form you should have an HTML element with .dynamo-errors. This is used as the parent element to render the form errors.

You should add data-dyn-field attribute to any input that should be validated. Then you can add the data-dyn-... attributes to use the validators and build your form validations.

That's the power of DynamoForms. All the form validation behavior is defined by using data-dyn-... data attributes.

When you submit the form, if there are any validation errors, they will be displayed otherwise the form will get submit.

Here is an example that uses Type validator for an input.

<form class="dynamo-forms">
   <div class="dynamo-errors"></div>
   <div>
       <label>Amount</label>
       <input 
         name="number" type="text"
         data-dyn-field
         data-dyn-name="Amount"
         data-dyn-type
         data-dyn-type-type="number"
       >
   </div>

   <button type="submit">Submit</button>
</form>

Development

You should have at least Node.js 10. See installation guide on how to install Node.js.

Simply run npm install to install the packages.