Edit in JSFiddle

// 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();
<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>

External resources loaded into this fiddle: