Form check

• Installation
• Overview

Installation

my-form-check.js

Overview

Toggle enable/disable button(s) that are linked to a form by its id value or ‘my-form-check’ attribute value. Any condition can be set on inputs into the targeted form (e.g. required inputs, checkboxes, …).

The current version works for checkboxes:

<div my-form-check="myForm" id="myForm">
    <div class="my-form">
        <input type="checkbox" checked id="checkbox-1" name="checkbox-1" value="1">
        <label for="checkbox-1">First</label>
    </div>
    <div class="my-form">
        <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
        <label for="checkbox-2">Second</label>
    </div>
    <div class="my-form">
        <input type="checkbox" id="checkbox-3" name="checkbox-3" value="3">
        <label for="checkbox-3">Third</label>
    </div>
</div>
<button my-form-check-origin="myForm" class="my-btn u-mt-lg disabled">Next</button>