design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-input-text, dees-input-iban): enhance validation handling and improve demo for input states

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 11:44:59 +00:00
parent 486ec11ce6
commit a0b17132ad
3 changed files with 30 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
View File

@@ -83,7 +83,16 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
if (deesInputText) {
deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
if (this.enteredIbanIsValid) {
deesInputText.validationState = 'valid';
deesInputText.validationText = 'IBAN is valid';
} else if (this.enteredString.length > 0) {
deesInputText.validationState = 'invalid';
deesInputText.validationText = 'Please enter a valid IBAN';
} else {
deesInputText.validationState = undefined;
deesInputText.validationText = '';
}
}
}

44
ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
View File

@@ -210,39 +210,7 @@ export const demoFunc = () => html`
</dees-panel>
</dees-demowrapper>
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
// Demonstrate validation states
const requiredInput = elementArg.querySelector('dees-input-text[required]') as DeesInputText;
const disabledInput = elementArg.querySelector('dees-input-text[disabled]') as DeesInputText;
const errorInput = elementArg.querySelector('dees-input-text[validationState="invalid"]') as DeesInputText;
if (requiredInput) {
// Show validation on blur for empty required field
requiredInput.addEventListener('blur', () => {
if (!requiredInput.getValue()) {
console.log('Required field is empty!');
}
});
}
if (disabledInput) {
console.log('Disabled input cannot be edited');
}
if (errorInput) {
console.log('Error input shows validation message:', errorInput.validationText);
// Simulate fixing the error
errorInput.addEventListener('changeSubject', () => {
const value = errorInput.getValue();
if (value.includes('@') && value.includes('.')) {
errorInput.validationState = 'valid';
errorInput.validationText = '';
console.log('Email validation passed!');
}
});
}
}}>
<dees-demowrapper>
<dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
<div class="input-group">
<dees-input-text
@@ -258,10 +226,14 @@ export const demoFunc = () => html`
></dees-input-text>
<dees-input-text
.label=${'Field with Error'}
.label=${'Email with Validation'}
.value=${'invalid@'}
.validationText=${'Please enter a valid email address'}
.validationState=${'invalid'}
.validationFunction=${(value: string) => {
if (value.includes('@') && value.includes('.')) {
return { valid: true, message: 'Email address is valid' };
}
return { valid: false, message: 'Please enter a valid email address' };
}}
></dees-input-text>
</div>
</dees-panel>

15
ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
View File

@@ -54,8 +54,8 @@ export class DeesInputText extends DeesInputBase {
})
accessor validationText: string = '';
@property({})
accessor validationFunction!: (value: string) => boolean;
@property({ attribute: false })
accessor validationFunction!: (value: string) => { valid: boolean; message?: string };
@property({
type: Boolean,
@@ -288,12 +288,21 @@ export class DeesInputText extends DeesInputBase {
}
firstUpdated() {
// Input event handling is already done in updateValue method
if (this.validationFunction && this.value) {
const result = this.validationFunction(this.value);
this.validationState = result.valid ? 'valid' : 'invalid';
this.validationText = result.message || '';
}
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
this.value = target.value;
if (this.validationFunction) {
const result = this.validationFunction(this.value);
this.validationState = result.valid ? 'valid' : 'invalid';
this.validationText = result.message || '';
}
this.changeSubject.next(this);
}