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

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>