// 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: