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!