Is it possible to validate chips input component?

[memiljamel]

Is it possible to validate chips input component?

[juujisai]

Hi! You can use our validation component to change the styles for the chips input but most likely you would have to add some custom rules for that as we didn't define those.

The styles are beeing added correctly here:

    <form id="form-1" data-te-validation-init>
      <div
        data-te-validate="input"
        data-te-validation-ruleset="isRequired"
        data-te-chips-input-init
        data-te-chips-placeholder
        class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"></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>

Validation examples that could help:

1. use only the styling from our validation like in this example: https://tw-elements.com/docs/standard/forms/validation/#basic
2. use our full validation and try to play around with custom rules. We used custom rules in this example: https://tw-elements.com/docs/standard/forms/validation/#custom-validation

[memiljamel]

Hello, thank you for your guidance. I understand. However, could the development team consider including this feature in the upcoming release? I believe this feature would be very useful. Also, another suggestion is to add the validation feature for isChecked in radio/checkbox groups, similar to this: https://mdbootstrap.com/docs/standard/forms/validation#section-supported-elements

[juujisai]

We'll keep the idea of adding a new rule that would be applied to chips input in mind for the future releases, thank you for your suggestion.

As of the radio/checkboxes we have support for those. We also can use isChecked rule for them. Checkout our docs here: https://tw-elements.com/docs/standard/forms/validation/#checkbox.

[memiljamel]

I mean isChecked only works to validate a single radio/checkbox. Can't this feature validate a radio/checkbox group?

[juujisai]

I see. At this moment I think the only possibility for that would be to manually validate the grouped radios and add data-te-validation-state="valid/invalid" attributes like in the basic example:
https://tw-elements.com/docs/standard/forms/validation/#basic

I'll add the idea of group validation (like in the example of radios) to our list. Thank you for pointing this out!