Form - Async validation is being called multiple times

Hi Team,

We are using async validator rule to validate a field - project name.
In dxForm, to validate if the Project Name entered already exists or not, we need to make server side call using async. This is working fine.
Now, when we are submitting the form, all the fields are being validated, async is being called again.

if the form is valid, we are making server-side call to save the form, which is again causing async validator to be called twice. This is manipulating the response for the project name validator and error message is shown on the page even if the form is valid.

Code:

Code
<dxi-item  [colSpan]="2"  dataField="name"  [editorOptions]="{    stylingMode: DX_FORM_APPEARANCE,    inputAttr: { autocomplete: 'chrome-off' },    disabled: !this.projectForm.customerId  }"  [validationRules]="projectNameValidator">  <dxo-label text="Project Name"></dxo-label></dxi-item>

Code
projectNameValidator = [  {    type: 'required',    message: 'Project Name is required',  },  {    type: 'async',    message: 'A customer may only use a project name once',    validationCallback: this.checkForProjectNameDuplicates.bind(this),  },];

Code
async checkForProjectNameDuplicates(e) {  return await this.projectService.nameExistsForCustomer(this.tokenId, e.value, this.projectForm.customerId).toPromise(); }

On Save Button Click:

Code
onSaveFormClick(e) {  const formVal = this.form.instance.validate();  if (formVal.isValid) {   save functionality... }}

On submitting the valid form, error is being shown - 'A customer may only use a project name once'.