Make your HTML forms super smart only with HTML.
You can either use
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
You should add
data-dyn-field attribute to any input that should be validated. Then you can add the
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>