superform - 01 onPropertyModifiedStateChange

by fiddlerintheoffice

HTML

<link rel="stylesheet" href="http://megaflop.net/uic/jquery.uic-form3-jsfiddle.css">
<script src="https://megaflop.net/uic/custom-elements.js"></script>
<form is="super-form">
    <div class="wrapper">
        <div class="required">
            <label for="username">username</label>
            <input type="text" id="username" name="username" value="uicform3user" placeholder="username">
        </div>
        <div class="required">
            <label for="password">password</label>
            <input type="text" id="password" name="password" value="uicform3pass" placeholder="password">
        </div>
    </div>
</form>

JavaScript

import SuperForm from 'https://megaflop.net/uic/super-form.js';
const form = document.querySelector('form');

form.on('propertyModifiedStateChange', (elements, name, initVal, currentVal, modified, e) => {
    elements.forEach(el => {
        if (modified === true) {
            el.closest('div').classList.add('modified');
        }
        else {
            el.closest('div').classList.remove('modified');
        }
    });
});