Editor update form not submitting after server side error

avnetsdsteam

Hi,
I am using the Editor extension and I validate the form data on server side.
I also have implemented a client side validation like this:

editor.on( 'preSubmit', function ( e, data, action ) {
    if ( editor.inError() ) {
        return false;
    }
} );

When the system returns an error from the server side (e.g. HTTP 500) the editor displays the error and this is as expected.
However, after an error occurs on the server side I have to click the "update" button twice in order to get my form submitted.
The first click on "Update" button after a server side error just removes the error message and doesn't submit the form.
The second click on "Update" button submits the form.
Why is that and how can I fix this?

allan

That's happening because the server is telling the client that the form is in an error state, and thus editor.inError() is true.

Those five lines of code doesn't actually do any validation of the data. Did you trim the code back for the post? If not and that is really the only code you have, just remove it as it isn't doing any validation for you.

Allan

avnetsdsteam

Hi Allan,
Yes, I trimmed the code for the post.
When we call "editor.inError()" datatable editor checks whether the "dom.formError" is displayed.
So let's say I submit my form with some invalid value in my form field. When an error comes back from the Back End, datatable editor displays "dom.formError" with the error message. We then change the input with a valid value and click the submit button again. At this point the form will not be submitted because the Back End error message is still being displayed in "dom.formError", so this.inError() will return true (even though there was no error in the JS validation) and "preSubmit" will return false. However, when "preSubmit" returns false the "dom.formError" will be hidden, and now we can click the button again and submit the form.

I solved my problem with a workaround. In order to reset the error state I had to manually change the "dom.formError" display attribute to 'none' in the beginning of my "preSubmit" function:

.on( 'preSubmit', function ( e, data, action ) {
    //WORKAROUND TO REMOVE BACK END ERRORS
    var el = $(datatableEditor.dom.formError);
    el.html( '' ).css('display', 'none');

    // front end validation goes here
    //we only check if a value was given
    if ( ! field.isMultiValue() ) {
      if ( ! field.val() ) {
        field.error( 'A value must be given for field');
      }
    }

    // If any error was reported, cancel the submission so it can be corrected
    if ( this.inError() ) {
    return false;
    };

Am I doing something wrong?
Is there any api function to clean datatable editor "dom.formError"? Or any other way to clean the messages after the Back End returns an error?

allan

Is there any api function to clean datatable editor "dom.formError"?

error() with an empty string will do so.

Let me know how you get on with that. Sorry - I'm just dashing out!

Allan

avnetsdsteam

Hi Allan,
I had already tried passing an empty string to "error()" api with no success. It looks like it cleans the error state but doesn't clean the "dom.formError" and so this.inError() returns true.

allan

Hi,

What version of Editor are you using?

I've just tried a little experiment on this page. Click the New button and then in the browser's console enter:

editor.error('123')

it will show the error message as expected.

Then enter:

editor.error('')

and the error message will be removed.

Are you able to link to the page showing the issue?

Thanks,
Allan