// add reset buttons and register their event handler
$('div.property').each(function () {
var key = $(this).find('input, textarea, select').attr('name');
var b = document.createElement('button');
$(b).addClass('reset');
$(b).attr('tabindex', '-1');
$(b).on('click', function () {
var initVal = $('form:eq(0)').uicForm3('initVal', key);
$('form:eq(0)').uicForm3('val', key, initVal);
});
var tn = document.createTextNode('reset');
b.appendChild(tn);
$(this).append(b);
});
// 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');
$(elements[0]).closest('div.property').find('.reset').show();
} else {
$(elements[0]).closest('div.property').removeClass('modified');
$(elements[0]).closest('div.property').find('.reset').hide();
}
},
onFormModifiedStateChange: function (modified, e) {
if (modified === true) {
$('form:eq(0)').addClass('modified');
} else {
$('form:eq(0)').removeClass('modified');
}
},
onPropertyValidStateChange: function (elements, name, valid, value) {
if (valid === false) {
$(elements[0]).closest('div.property').addClass('invalid');
} else {
$(elements[0]).closest('div.property').removeClass('invalid');
}
},
onFormValidStateChange: function (valid, e) {
if (valid === false) {
$('form:eq(0)').addClass('invalid');
} else {
$('form:eq(0)').removeClass('invalid');
}
}
}
// apply uicForm3 to the form
$('form:eq(0)').uicForm3();
// register actions for the click event of the action buttons
$('#setData').on('click', function (e) {
$('#rawdata').empty();
$('form:eq(0)').uicForm3('data', data);
});
$('#submitStay').on('click', function (e) {
var d = $('form:eq(0)').uicForm3('data');
var valid = true
var response = {};
for (i in d) {
if (i != 'id' && d[i].length == 0) valid = false;
var obj = {
value: d[i],
valid: (i != 'id' && d[i].length == 0) ? false : true
};
response[i] = obj;
}
console.log(response, valid)
if (valid == false) {
$('#rawdata').html(syntaxHighlight(JSON.stringify(response, null, 2)));
$('form:eq(0)').uicForm3('data', response);
} else {
d.id = 1;
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('initData', d);
}
});
$('#submitClear').on('click', function (e) {
var d = $('form:eq(0)').uicForm3('data');
var valid = true
var response = {};
for (i in d) {
if (i != 'id' && d[i].length == 0) valid = false;
var obj = {
value: d[i],
valid: (i != 'id' && d[i].length == 0) ? false : true
};
response[i] = obj;
}
if (valid == false) {
$('#rawdata').html(syntaxHighlight(JSON.stringify(response, null, 2)));
$('form:eq(0)').uicForm3('data', response);
} else {
$('#rawdata').empty();
$('form:eq(0)').uicForm3('clear');
}
});
$('#clear').on('click', function (e) {
$('#rawdata').empty();
$('form:eq(0)').uicForm3('clear');
});
// 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 = {
id :1,
title: "mr",
firstname: "John",
lastname: "Lennon",
birthday: "1940-10-09",
nationality: "gb",
bands: ["The Beatles", "Plastic Ono Band"]
};
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
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="id">id</label>
<input type="text" id="id" name="id" value="" placeholder="new record" readonly="readonly">
</div>
<div class="property divtitle">
<label>title</label>
<div>
<input type="radio" id="title_mr" name="title" value="mr">
<label for="title_mr">Mr.</label>
<input type="radio" id="title_ms" name="title" value="ms">
<label for="title_ms">Ms.</label>
</div>
</div>
<div class="property">
<label for="firstname">firstname</label>
<input type="text" id="firstname" name="firstname" value="" placeholder="firstname">
</div>
<div class="property">
<label for="lastname">lastname</label>
<input type="text" id="lastname" name="lastname" value="" placeholder="lastname">
</div>
<div class="property">
<label for="birthday">birthday</label>
<input type="date" id="birthday" name="birthday" value="" placeholder="birthday">
</div>
<div class="property">
<label for="nationality">born in:</label>
<select name="nationality">
<option value="">-- nothing selected --</option>
<option value="gb">United Kingdom</option>
<option value="us">United States</option>
<option value="jp">Japan</option>
</select>
</div>
<div class="property divbands">
<label>Bands</label>
<br>
<div>
<div>
<input type="checkbox" id="bands_rs" name="bands" value="Rolling Stones">
<label for="bands_rs">Rolling Stones</label>
<br>
<input type="checkbox" id="bands_beatles" name="bands" value="The Beatles">
<label for="bands_beatles">The Beatles</label>
<br>
<input type="checkbox" id="bands_pob" name="bands" value="Plastic Ono Band">
<label for="bands_pob">Plastic Ono Band</label>
</div>
<div>
<input type="checkbox" id="bands_who" name="bands" value="The Who">
<label for="bands_who">The Who</label>
<br>
<input type="checkbox" id="bands_wings" name="bands" value="Wings">
<label for="bands_wings">Wings</label>
</div>
<div class="clear"></div>
</div>
</div>
<div class="message">
<div class="initial">Your form is in initial state.</div>
<div class="unsaved">You have unsaved data.</div>
<div class="notvalid">Your form containes invalid data.</div>
</div>
</div> <pre id="rawdata" class="wrapper float"></pre>
<div class="wrapper buttons">
<button id="setData">set data</button>
<button id="submitStay">submit and stay</button>
<button id="submitClear">submit and clear</button>
<button id="clear">clear</button>
</div>
</form>
External resources loaded into this fiddle: