uicform3 - 02 onFormModifiedStateChange

by fiddlerintheoffice

HTML

<script src="http://megaflop.net/uic/jquery.uic-form3.js"></script>
<link rel="stylesheet" href="http://megaflop.net/uic/jquery.uic-form3-jsfiddle.css">
<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 class="message">
            <div class="initial">Your form is in initial state.</div>
            <div class="unsaved">You have unsaved data.</div>
        </div>
    </div>
</form>

JavaScript

// set defaults for uicForm3
$.fn.uicForm3.defaults = {
    onPropertyModifiedStateChange: function (elements, name, initValue, currentValue, modified, e) {
        if (modified === true) {
            $(elements[0]).closest('div').addClass('modified');
        } else {
            $(elements[0]).closest('div').removeClass('modified');
        }
    },
    onFormModifiedStateChange: function (modified, e) {
        if (modified === true) {
            $('form:eq(0)').addClass('modified');
        } else {
            $('form:eq(0)').removeClass('modified');
        }
    }
}

// apply uicForm3 to the form
$('form:eq(0)').uicForm3();