KeyTable - Cancel Blur with Client Validation
KeyTable - Cancel Blur with Client Validation
First off, great product love datatables & the editor..
I am working on a similar situation to this thread: https://datatables.net/forums/discussion/40248/cancel-key-blur-when-field-contains-errors
I am using inline editing, keytables, and submitting onblur, and am now attempting to add basic client validation using the preSubmit event.
If I edit a field with an invalid value and press enter, the error is shown. However, if I hit the tab key, the field reverts back to the original value and the next field has the focus w/o showing the original error. I tried using keys.disable(), but that does not seem to work.Seems like I need to cancel the keytables action somehow.
Here is the code I am using:
<script type="text/javascript">
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor({
ajax: {
url: "/ListView/ListViewAjaxUpdate",
contentType: 'application/json',
data: function(d) {
d.listId = '1';
return JSON.stringify(d);
}
},
table: "#tblData",
idSrc: 'RowId',
fields: [
{
label: 'Test string field',
name: 'Id1'
},
{
label: 'Test int field',
name: 'Id2'
},
{
label: 'Another string field',
name: 'Id3'
}
]
});
// Activate an inline edit on click of a table cell and allow submit on blur.
$('#tblData').on('click', 'tbody td:not(:first-child)',
function () {
editor.inline(this,
{
submitOnBlur: true
});
}
);
var table = $('#tblData').DataTable({
lengthChange: false,
processing: false,
filter: false,
ordering: true,
order: [[0, 'asc']],
serverSide: true,
dom: 'frtip',
ajax: {
url: "/ListView/ListViewAjaxGet",
type: "POST",
data: function(d) {
d.listId =
'1';
}
},
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{
title: 'Test string field',
data: 'Id1'
},
{
title: 'Test int field',
data: 'Id2'
},
{
title: 'Another string field',
data: 'Id3'
},
{
title: "RowId",
data: "RowId",
visible: false
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
keys: {
columns: ':not(:first-child)',
keys: [9],
editor: editor,
editOnFocus: true
},
buttons: [
{ extend: 'create', editor: editor, formTitle: 'New list item' },
{ extend: 'edit', editor: editor, formTitle: 'Edit list item' },
{ extend: 'remove', editor: editor, formTitle: 'Delete list item' }
],
initComplete: function(settings, json) {
$(this).DataTable().buttons().container().appendTo($('#tblDataButtons'));
}
});
// Add basic client validation.
editor.on('preSubmit',
function(e, o, action) {
if (action !== 'remove') {
if (!ClientValidationString(this
.field('Id1').val(), 256)) {
this.field('Id1')
.error('Must be less than 256 chars.');
}
if (!ClientValidationInt(this
.field('Id2').val())) {
this.error('Id2')
.error('Must be an integer value.');
}
if (!ClientValidationString(this
.field('Id3').val(), 256)) {
this.field('Id3')
.error('Must be less than 256 chars.');
}
}
// If any error, cancel.
if (this.inError()) {
// This doesn't seem to work.
//table.keys.disable();
//table.keys.enable();
return false;
}
return true;
}
);
});
</script>
Thanks!
This discussion has been closed.
Answers
Thanks for posting this. Let me look into this and get back to you. I'll see if I can improve the handling in KeyTable for this sort of case.
Allan
The text file is my javascript to init the table.
What is your question?
Watch the gif. It would be nice to be able to show the error, let them fix the error, they press tab and it goes to the correct cell and lets them edit it.