How to prevent error messages under field?

pisisler

Hi.

I am trying to use a modal box for showing validation errors, which I can, by using a callback in onFieldError option. But of course the error message is displayed under the field too. Is there a way to suppress the field error being shown under the field? I tried something like below but it didn't work.

$.fn.dataTable.ext.errMode = 'none';
$('#table').on('error.dt', function (e, settings, techNote, message) {
    alert(message);
});

Guess we can call this a custom error handling method. There were discussions about this but I couldn't manage to make a viable solution.

colin

Is this using Editor? You would need to clear the errors manually with field().error().

Out of curiosity, could you let me know if this is the account you purchased Editor with - as it appears you had a trial that expired last year.

Colin

pisisler

Thank you colin. I will try clearing the errors but the problem is, on('error.dt) doesn't seem to be triggered on field errors.

By the way, I haven't yet purchased it; because last year I abandoned the project I had in mind. Now I am taking a look at Editor 2.0.1 and if I can turn it into a project, I will buy a license in a couple of days.

colin

Excellent. on('error.dt') is only for errors when loading the DataTable, not for field errors with Editor. For Editor, you could use submitError,

Colin

pisisler

Now I own a license and checked the field().error() doc but I can't utilize it to suppress the error after it is passed to another function in onFieldError declaration. Like:

    onFieldError: function (editor, error) {
        errorbox(error.name + ': ' + error.status);
        // Now how do I prevent the error shown inside the table row?
    },

allan

If you wanted to simply not have Editor display the field error messages you could hide them with a little CSS:

div.DTE_Field_Error {
  display: none !important;
}

Does that do what you need?

Allan

pisisler

Nope @allan , it doesn't work. As far as I can see, there is no "DTE_Field_Error" class in anywhere of the DOM. I have multiple server side validators some of which check other field values and trigger error even if the edited field itself is valid. Like for example if a product code is not defined, I prevent from saving product price even if a valid value is entered into the price field.

Now the field error occurs in a div which has this class: form-text text-danger small and right under it, other validators show other errors in a div which has a class: DTE_Form_Error.

So I tried your suggestion with DTE_Form_Error (instead of DTE_Field_Error) and it seems to work, with some little peculiarities like;

• After the error is triggered, field slides down to open the error div, but since its display is set to none, it slides up back without displaying anything.
• I have two numeric fields in which I type letters to trigger a validation error. One of these numeric fields run the errorbox() function which I use to display a dialog box; but the other field does not; instead it keeps sliding the field down and display "input not valid" under the input. Both fields are numeric. The first one has built-in minNum(0) and unique() validators on the server side and the second one has minNum(0) only. (But I guess "input not valid" is triggered on client-side as "numeric" type of the column is defined on the client-side.)
• If this second field I mention passes the other validators as well; it both runs the errorbox() and display "input not valid" at the same time.

By the way I tried to clear the error like;

onFieldError: function (editor, error) {
    errorbox(error.name + ': ' + error.status);
    editor.field(editor.displayed()).error(null);
    return false;
},

This way it tries to hide only DTE_Form_Error but the field error is still shown; yet this either doesn't work correctly, because of a bug in displayed().

allan

It is part of the field DOM structure in the Editor form:

Are you able to give me a link to your page so I can take a look and see why that wouldn't be hiding the error elements for the fields?

Thanks,
Allan

pisisler

It is a local development environment, I can not yet give a link, but I sent you a screenshot with a private message (because it is kind of sensitive data). In the screenshot you will see that "msg-error" element doesn't have DTE_Field_Error class.

"Stok" field is the inventory count of a product and therefore it must be numeric. You will see that I typed an alphanumeric value to trigger the validation error. The first error in red which reads "input not valid" is the validation of the field itself. You will also see a gray error message right under it. That is another field's validator. (I am using allIfchanged to check all fields.) You see that errorbox() is not run (which must have had, because it is triggered in onFieldError) and the error slides down the field breaking the table view terribly.

There is also a "barkod" field which you will see in the second screenshot I sent you. You will see that this is also a numeric field and I trigger the error the same way by entering an alphanumeric value into it. You will see that exact same error messages are shown under the field. ("input not valid" first and other field's validator under it); but this time errorbox() is also run, as you can see that an error dialog is shown which was absent on the exact same error in "Stok" field.

allan

Ah! You are using Bootstrap styling?

div[data-dte-e='msg-error'] {
  display: none !important;
}

Will do the job regardless of the styling framework.

Another option if you want total control over the error messages is to use the postSubmit event to modify the data coming back from the server before Editor can see and process it (you can add your own processing at that point if you want).

editor.on('postSubmit', function (e, json, data, action, xhr) {
  // Do error processing on json.fieldErrors

  // Wipe out the errors before Editor can see them
  json.fieldErrors.length = 0;
})

Regards,
Allan

pisisler

That worked well, thank you.