Fix invalid fields were not blocking submit

This commit is contained in:
nathan 2022-09-21 09:56:15 -06:00
parent d9cc794836
commit e6ce33b153
2 changed files with 44 additions and 21 deletions

View File

@ -54,6 +54,8 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
protected validators : Validator[]; protected validators : Validator[];
// Validators for every instance of a type of widget // Validators for every instance of a type of widget
protected defaultValidators : Validator[]; protected defaultValidators : Validator[];
// Promise used during validation
protected validateComplete : Promise<undefined>;
protected isSlComponent = false; protected isSlComponent = false;
@ -426,25 +428,31 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
values.forEach((value) => doCheck(value, validator)); values.forEach((value) => doCheck(value, validator));
} }
}); });
await Promise.all(resultPromises); this.validateComplete = Promise.all(resultPromises);
// Show feedback from all failing validators // Wait until all validation is finished, then update UI
if(feedbackData.length > 0) this.validateComplete.then(() =>
{ {
let feedback = <LionValidationFeedback>document.createElement("lion-validation-feedback"); // Show feedback from all failing validators
feedback.feedbackData = feedbackData; if(feedbackData.length > 0)
feedback.slot = "help-text";
this.append(feedback);
if(this.shadowRoot.querySelector("slot[name='feedback']"))
{ {
feedback.slot = "feedback"; let feedback = <LionValidationFeedback>document.createElement("lion-validation-feedback");
feedback.feedbackData = feedbackData;
feedback.slot = "help-text";
this.append(feedback);
if(this.shadowRoot.querySelector("slot[name='feedback']"))
{
feedback.slot = "feedback";
}
else
{
// Not always visible?
(<HTMLElement>this.shadowRoot.querySelector("#help-text")).style.display = "initial";
}
} }
else });
{
// Not always visible? return this.validateComplete;
(<HTMLElement>this.shadowRoot.querySelector("#help-text")).style.display = "initial";
}
}
} }
set_validation_error(err : string | false) set_validation_error(err : string | false)
@ -482,6 +490,17 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
this.validate(); this.validate();
} }
/**
* Get a list of feedback types
*
* @returns {string[]}
*/
public get hasFeedbackFor() : string[]
{
let feedback = (<LionValidationFeedback>this.querySelector("lion-validation-feedback"))?.feedbackData || [];
return feedback.map((f) => f.type);
}
/** /**
* Called whenever the template gets submitted. We return false if the widget * Called whenever the template gets submitted. We return false if the widget
* is not valid, which cancels the submission. * is not valid, which cancels the submission.

View File

@ -1086,14 +1086,18 @@ export class etemplate2
{ {
let invalid_widgets = widgets.filter((widget) => widget); let invalid_widgets = widgets.filter((widget) => widget);
if(invalid_widgets.length) if(invalid_widgets.length && !(invalid_widgets[0] instanceof et2_widget))
{ {
// Show the first invalid widget, not the last // Handle validation_error (messages coming back from server as a response) if widget is children of a tabbox
if(invalid_widgets[0] && invalid_widgets[0] instanceof et2_widget) let tmpWidget = invalid_widgets[0];
while(tmpWidget.getParent() && tmpWidget.getType() !== 'ET2-TABBOX')
{ {
let messages = []; tmpWidget = tmpWidget.getParent();
let valid = invalid_widgets[0].isValid(messages); }
invalid_widgets[0].set_validation_error(messages); //Activate the tab where the widget with validation error is located
if(tmpWidget.getType() === 'ET2-TABBOX')
{
(<Et2Tabs><unknown>tmpWidget).activateTab(invalid_widgets[0]);
} }
} }
else else