Unsure about behavior with fieldErrors and Bootstrap 3.

Tester2017

Using Bootstrap 3 and DataTables is beautiful. However, I have 1 question about its behavior in case of field errors.

It gives not only the input field the 'danger' color but also the parts editor.field.fieldInfo (data-dte-e="msg-info") and editor.field.message(data-dte-e="msg-message").

At least I would not expect this for the fieldInfo part, as it is neutral in the error issue and now "shouting" for attention, while I thought that the attention is especially needed for the errorMsg.

See image:
https://ibb.co/n6PeVb

kthorngren

The Editor Bootstrap 3 example doesn't seem ti exhibit that behavior. If you click "New", leave all fields blank and click Create you will see the error "This field is required" for first and last names. Nothing extra.

Looks like you are using a tabs when creating records. Wonder if there is something with that config causing the issue. Can you try without tabs as a test?

Someone else may have seen this and have an answer. If not can you provide a test case showing the issue?

Kevin

Tester2017

@kthorngren

Thanks for your reaction Kevin. I have the example files on localhost. If I add the following line to the Editor Bootstrap 3 example: editor.field("first_name").fieldInfo("Info about the field first_name"); it will appear in read also if I do not enter a first name.

I added the 'extra' text.

Here the example you named with the fiedlInfo line appended:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: 'datetime'
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
/*  fieldInfo line appended below: */
    editor.field("first_name").fieldInfo("Info about the field first_name");

    var table = $('#example').DataTable( {
        lengthChange: false,
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true
    } );

    // Display the buttons
    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );

    table.buttons().container()
        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
} );

kthorngren

I see, I understand your question now - missed the fieldInfo part. The fieldinfo text ("Unique hostname") is changed to red.

Will let Allan or someone else more knowledgable answer the question of how to change this.

Kevin

allan

Its a good point!

This is being caused by the fact that the field container element (div.DTE_Field) is being assigned error and has-error classes, which means that Bootstrap will highlight everything inside it as in error state.

As a workaround you could use:

div.DTE_Field.error div[data-dte-e="msg-info"] {
  color: inherit;
}

I'll get that added in for the next release, as I agree that it shouldn't be highlighted like that.

Regards,
Allan

Tester2017

@Allan another workaround I am using is the following:

editor.field( `field` ).fieldInfo( `<div class="alert alert-info">` + `info text about the field` + `</div>`);

The classes "alert" and "alert-info" will prevent that an error will change the color of fieldInfo. There is only 1 price as "alert" will occupy more space, but for me, it is exactly as I like to have it, but you can remove "alert" and work with only "alert-info".