How to show / hide server side validation in fields inside form dialog / inline

[Marac]

I am trying to show validation messages from error response I get from the API in the FormValidator

I am using grid with dialog and callback dataSourceChanged to create or edit record and this works fine if there is no server error. But if I get error in response I catch it and I use this method to add error to form and validate it with the message I get from that error response

(This is something I came up while going through the documentation and trying different methods from Validation methods)

// state is passed from dataSourceChange

// errors is the response i get from the server

const fieldValidation = (state: any, errors: Record<string, string[]>) => {

const formInstance = state.form.ej2_instances[0];

const handleServerErrorRules = (action: 'add' | 'remove') => {

const rules = ['regex', 'required'];

Object.entries(errors).forEach(([key, value]) => {

if (state.data.hasOwnProperty(key)) {

if (action === 'add') {

// regex that always fails to show the message

// required if the field is empty it will not show regex validation

const stringValue = value.toString();

formInstance.addRules(key, { [rules[0]]: [/^\b$/, stringValue], [rules[1]]: stringValue });

} else {

formInstance.removeRules(key, rules);

}

}

});

};

formInstance.removeRules();

handleServerErrorRules('add');

formInstance.validate();

handleServerErrorRules('remove');

};

But the problem with this is it will show the errors of mutliple fields for example the first time, but when I add correct data to a field and try to save it again it shows all the errors it got first time, although I can see in error response that the field is not there, now I assume this has something to do with a way validation is handled

short example (this can be done with client side validation but I am interested in how to do it server and made this example easy):

Name: "",

Email: "",

on submit this will give me

Name: "", the field is required

Email: "", the field is required

now if I enter name it will still show me both fields as required while i get in error response only one.

How should I show server side validation in the correct field and also when resubmitting the form with some of the values that are correct?

Or is there a different way to show server side validation that I am missing (in both dialog and inline)

[Pavithra Subramaniyam]

Hi Marac,

Currently, we are validating the scenario “Need to dynamically update the column validation based on the server-side response” at our end, so we will update more details on September 26^th, 2022. Until then we appreciate your patience.

Regards,

Pavithra S

[Pavithra Subramaniyam]

Hi Marac,

Thanks for your patience.

Since you are dynamically adding/removing the rules based on the server-side error message, the field will not be validated again if the corresponding rules are removed. For example, in your case, the first time, if both the “Name” and “Email” fields are set with rules it will show the error popup. Now you are entering the “Name” value and the server will return only the error for “Email” field.  Based on this you are removing the previous rules and setting the new one for only “Email” field. Now, the “Name” field will not be validated by the formValidator so the previous error popup is not cleared. This is the reason for the reported behavior.

So, we suggest calling the “destroyToolTip” method of the Grid edit module to clear the error popup after removing the rules to achieve your requirement. Please refer to the below code example for more information.

// state is passed from dataSourceChange

// errors is the response i get from the server

const fieldValidation = (state: any, errors: Record<string, string[]>) => {

 

  .  .  .

var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]

 

formInstance.removeRules();

grid.editModule.destroyToolTip();

handleServerErrorRules('add');

formInstance.validate();

handleServerErrorRules('remove');

};

 

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Marac]

I can't seem to find this method in grid Instance (which I am getting from reference). I went to search for it in node modules couldn't find it. I am using ej2-react-grids: 20.1.59, so maybe it is in newer version or?

[Pavithra Subramaniyam]

Hi Marac,

The “destroyToolTip” is an internal method and we suggested this method as a workaround since your requirement is a custom scenario. So, you can use this method as in the below code to overcome the type error.

 

(grid.editModule as any).destroyToolTip();

 

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Nurlan Turdaliev]

Implemented those sets of hacks. Oh man, I wish there was a sane API to do the same stuff.

Thanks for the tips though, gets work done :)