vue.jsvuejs3tailwind-csstailwind-elements

How do I disable the message and style of an item when validation is valid?


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 });

enter image description here

How do I disable the message and style of an item when validation is valid ?


Solution

  • You should use custom data attributes on form element to customize for your needs. Adding data-te-class-XXX where XXX is list of attributes key given in API Docs here . Example shared below where data-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

    enter image description here

    <form data-te-validation-init data-te-class-notch-leading-valid="border-[#d4d4d4] dark:border-[#d4d4d4] group-data-[te-input-focused]:shadow-[-1px_0_0_#d4d4d4,_0_1px_0_0_#d4d4d4,_0_-1px_0_0_#d4d4d4] group-data-[te-input-focused]:border-[#d4d4d4]" data-te-class-notch-middle-valid="!border-[#d4d4d4] dark:border-[#d4d4d4] group-data-[te-input-focused]:shadow-[0_1px_0_0_#d4d4d4] group-data-[te-input-focused]:border-[#d4d4d4]"
      data-te-class-notch-trailing-valid="border-[#d4d4d4] dark:border-[#d4d4d4] group-data-[te-input-focused]:shadow-[1px_0_0_#d4d4d4,_0_-1px_0_0_#d4d4d4,_0_1px_0_0_#d4d4d4] group-data-[te-input-focused]:border-[#d4d4d4]">
      <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>