How to get valid/invalid property of vaadin-text-field?

Flow
1

Hello! For my web application I created custom Lit component containing a number of vaadin-text-field items. For each of items I have to get input value and valid status. No problem to get string value but invalid value is always indefined. I’m confused because at the backend side this works as well and I could get both string value and invalid status in Java code. Below is a snippet of component code to explain my problm:

    private renderDialog = () => html`
        <vaadin-vertical-layout style="width: 300px">
            <vaadin-icon slot="prefix" icon="vaadin:database"></vaadin-icon>
            <label>Database properties:</label>
            <vaadin-text-field
                    label="Schema name"
                    id="schemaName"
                    required
                    pattern="[a-zA-Z0-9]+"
                    style="width: 100%"
                    @input="${(e: Event) => {
                        var schemaField = (e.target as TextField);
                        console.log("schemaField.invalid == " + schemaField.invalid);
                        console.log("schemaField.value == " + schemaField.value);
                    }}"
            ></vaadin-text-field>

So in browser’s console I see the following result:

image
Have no idea how to get actual invalid status. Please help :roll_eyes:

2

The components don’t validate themselves on input, as such the validation state is still undefined. input is triggered for each keystroke, which is usually not when you want to validate. For example, in an email field you want to allow users entering a full email address first, instead of validating after they have entered the first character, which would always fail.

If you want to wait with validation until the user has finished entering a value, you could listen for the change event instead, at which point the component should also validate. If you really want to validate already while the user is still typing, you can either:

  • call validate on the respective component, which will update the invalid state of the component
  • call checkValidity, which will only return whether the current value is valid or not but not change any state
3

Great advice, thanks a lot!