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.property').addClass('modified');
        } else {
            $(elements[0]).closest('div.property').removeClass('modified');
        }
    },
    onFormModifiedStateChange: function (modified, e) {
        if (modified === true) {
            $('form:eq(0)').addClass('modified');
        } else {
            $('form:eq(0)').removeClass('modified');
        }
    },
    onInitDataUnload: function (initialData, formModified) {
        if (formModified) {
            if (confirm('Do you want to dismiss the changes of the current recordset?')) {
                return true;
            }
            return false;
        }
        return true;
    }
}

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

// register actions for the click event of the action buttons
$('#setInitialData').on('click', function (e) {
    $('form:eq(0)').uicForm3('initData', data);
});
$('#getInitialData').on('click', function (e) {
    $('#rawdata').html(syntaxHighlight(JSON.stringify($('form:eq(0)').uicForm3('data'), null, 2)));
});


// This part is less interesting. It's just the data-definition and a syntax highlighter for the json in this example that is not needed for the form handling in any way.

var data = {
    account: {
        id: 1,
        username: 'beatles',
        password: 'submarine',
        users: [{
            firstname: 'John',
            lastname: 'Lennon'
        }, {
            firstname: 'Paul',
            lastname: 'McCartney'
        }]
    }
};


function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

<form>
    <div class="wrapper float border">
        <div class="property">
            <label for="account_id">id</label>
            <input type="text" id="account_id" name="account[id]" value="" placeholder="new record" readonly="readonly">
        </div>
        <div class="property">
            <label for="account_username">username</label>
            <input type="text" id="account_username" name="account[username]" value="" placeholder="username">
        </div>
        <div class="property">
            <label for="account_password">password</label>
            <input type="text" id="account_password" name="account[password]" value="" placeholder="password">
        </div>
        <div class="property users">
            <div class="user">
                <div class="property">
                    <label for="account_users_0_firstname">firstname</label>
                    <input type="text" id="account_users_0_firstname" name="account[users][0]firstname" value="" placeholder="firstname">
                </div>
                <div class="property">
                    <label for="account_users_0_lastname">lastname</label>
                    <input type="text" id="account_users_0_lastname" name="account[users][0]lastname" value="" placeholder="lastname">
                </div>
            </div>
            <div class="user">
                <div class="property">
                    <label for="account_users_1_firstname">firstname</label>
                    <input type="text" id="account_users_1_firstname" name="account[users][1]firstname" value="" placeholder="firstname">
                </div>
                <div class="property">
                    <label for="account_users_1_lastname">lastname</label>
                    <input type="text" id="account_users_1_lastname" name="account[users][1]lastname" value="" placeholder="lastname">
                </div>
            </div>
        </div>
    </div><pre id="rawdata" class="wrapper float"></pre>

    <div class="wrapper buttons">
        <button id="setInitialData">set initial data</button> |
        <button id="getInitialData">get initial data</button>
    </div>
</form>