Problems with editor.inError() when using bootstrap theme

Lucho_1312

Hi!

I want to report an issue with the Bootstrap theme, regarding the editor.inError() method.

This is the scenario:
- You have a datatable with the editor with the Bootstrap theme
- You use the inError() method to validate the form client-side
- You haven't opened the form yet, after you reloaded the page
- You have the editor settings to display the form inside a modal

The inError() works like this:

Editor.prototype.inError = function ( inNames )
{
    // Is there a global error?
    if ( $(this.dom.formError).is(':visible') ) {
        return true;
    }

    // Field specific
    var fields = this.s.fields;
    var names = this._fieldNames( inNames );

    for ( var i=0, ien=names.length ; i<ien ; i++ ) {
        if ( fields[ names[i] ].inError() ) {
            return true;
        }
    }

    return false;
};

It checks the visibility of the formError element for this editor (in this case, this is the element it refers to:
<div data-dte-e="form_error" class="DTE_Form_Error"></div>

But, what's the problem?
Well, the problem is that the bootstrap theme doesn't include a CSS style to hide by default this div. So, the first time a form is being validated, the response of the inError() method is true.

As I'm including a client-side validation on the preSubmit, the validation fails (but also, as there were not real errors, the div <div data-dte-e="form_error" class="DTE_Form_Error"></div> gets hidden), and I have to click 2 times in the Submit button to finally send the data to the server.

The solution I found?
Just copy the styles from the original CSS stylessheet (editor.dataTables.css) in the boostrap one (editor.bootstrap.css). The code I copied was:

div.DTE div.DTE_Form_Error {
  float: left;
  padding: 5px;
  display: none;
  color: #b11f1f;
}

I hope this helps somebody and also it gets fixed in next releases.

Cheers!
Luciano

allan

Hi,

Can that issue be reproduced here? I haven't been able to do so, but I might be missing something.

Thanks,
Allan

Lucho_1312

No, I couldn't add the validation because I can't find the method isError() in the editor instance from the example

Basically, what I'm doing (I just put the important part to make the example more simple) is this:

editor.on('preSubmit', function() {
    // First time you call the form and try to submit it, this returns true, even before validating fields
    console.log(this.isError());

    // Get the editor fields
    var fields = editor.fields();

    // Validate all the fields
    for (let i = 0; i < formFields.length; i++) {
        var field = editor.field(formFields[i]);
        var fieldValue = field.get();
        if(customValidation(fieldValue)) { 
            field.error([message here]);
        }
    }

    // Cancel the submit if there's any error
    if(editor.isError()) {
        return false;
    }
});

As the editor in the example doesn't have the isError() method, I couldn't replicate it, sorry

allan

I can't find the method isError() in the editor instance from the example

In the example I linked to? You can do editor.field('first_name').inError() in your browser's console for a field, or editor.inError() for the global. Attached is a screen grab.

Thanks,
Allan