Difference in this.inError() and this.field(fieldName).inError().

Tester2017

Stand alone Editor and inline editing.

Difference between this.field(fieldName).inError() and this.inError()

If you use the second one, on a fresh page load if will always return TRUE, meaning 'this' is in an error state, if you submit twice it will return FALSE (supposing that all the field validations passed with success). I was using the second one, and experiment a strange behavior because on a fresh page load I had to press the submit button two times before having a successful submit.

Now I replaced this.inError() with this.field(fieldName).inError() and only one submit (even on a fresh loaded page) is sufficient to effect a submit.

My question: is this expected behavior?

Working code:

/*  ------------------------------------------------------------------------------------ */
/*  Validate fields before submitting to the server. */
editor.on(`preSubmit`, function(e, data, action)
{

    //  var fieldName = e.currentTarget.s.includeFields[0];
    //  https://datatables.net/forums/discussion/48403/editor-standalone-inline-how-to-get-access-to-all-editable-fields-and-not-only-to-the-edited-one
    var fieldName = editor.displayed();
    fieldVal = eval(`this.field("`+fieldName+`").val()`);

    switch (fieldName)
    {
        case `users.first_name`:
            .......
            .......

            break;


        case `users.email`:

            if ( ! fieldVal) {
                this.field(fieldName).error(fieldErrMsgs.required_email);
            }

        break;
    }

    /*
        If any error was reported we will cancel the submission to the server so
        corrections can be made.
    */

    if (this.field(fieldName).inError())
    {
        return false;
    }
});
/*  ------------------------------------------------------------------------------------ */

The next test will ALLWAYS return FALSE on a fresh page load.

if (this.inError())
{
    return false;
}

allan

From what you are saying, it sounds like if you pop open the console in your browser and simply use editor.inError() it would return true after you've just refresh the page. Have I understood correctly?

If I try this example and do that, it returns false as expected.

Allan

Tester2017

@allan, yes, that is correct.

By the way, I am using Bootstrap 3.

After doing some more investigation I found the following difference between a fresh load and a "not-fresh" load (on my page):

<div data-dte-e="form_error" class="DTE_Form_Error"></div>

<div data-dte-e="form_error" class="DTE_Form_Error" style="display: none;"></div>

If you go to https://editor.datatables.net/examples/styling/bootstrap.html, and add the following code after the editor definition:

// Activate an inline edit on click of a table cell
$(`#example`).on(`click`, `tbody td:not(:first-child)`, function(e) {
    editor.inline(this);
});

You will see that clicking on a column will open the inline editor with edit.inError() status TRUE.

For example, click on column "position", console will give you the following results:

editor.field('position').inError()
false
editor.inError()
true

allan

Thanks!

I've committed a fix for this now and it will be in 1.7.3. Basically in inError I now check to see if the error message is empty as well as being visible:

    var formError = $(this.dom.formError);

    // Is there a global error?
    if ( formError.is(':visible') && formError.is(':not(:empty)') ) {
        return true;
    }

That addresses this, and since clearing the error message will also clear the text in the DOM element for it, this works nicely.

Regards,
Allan