I'm using VUE 3 Composition API and want to do additional validation in front-end. Tailwind library - "TW Elements" is plugged into my project, which already has ready-made forms with validation. After studying the documentation of "TW Elements" I didn't understand how to disable the message and style of an element when it passes validation.
Sample code with validation from the TW Elements documentation that I'm trying to use:
HTML:
<form data-te-validation-init>
<div
class="relative mb-3"
data-te-input-wrapper-init
data-te-validate="input"
data-te-validation-ruleset="isRequired">
<input
type="text"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
id="exampleFormAdvancedInput1"
placeholder="Example label" />
<label
for="exampleFormAdvancedInput1"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Example label
</label>
</div>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-submit-btn-ref>
Validate
</button>
</form>
JavaScript:
import {
Validation,
Input,
initTE,
} from "tw-elements";
initTE({ Validation, Input });
How do I disable the message and style of an item when validation is valid ?
You should use custom data attributes on
formelement to customize for your needs. Addingdata-te-class-XXXwhereXXXis list of attributes key given in API Docs here . Example shared below wheredata-te-class-notch-trailing-valid="..."is the one you are looking for.Here is the stackblitz Demo: View Demo where the valid border is changed to grey from green