Validation with SSR (HTMX)

[yazalulloa]

Hi, I'm building a minimal web application with HTMX, on form submission in case of an error I want to use the validation components to display errors

The initial code is this:

<form class="form-control"
      data-te-validation-init
      data-te-validated="true"
      hx-post="/api/buildings/new"
      hx-indicator=".htmx-indicator"
      script="init call initComponents()"
>
    <div class="relative mb-3"
         data-te-input-wrapper-init
         data-te-validate="input"
    >
        <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 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                id="formBuildingId"
                name="id"
                placeholder="ID"
                value=""
                maxlength="20"
                oninput="limitInputToMaxLength(this)"/>
        <label
                for="formBuildingId"
                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"
        >ID
        </label>
    </div>
    
    <button  class="btn btn-primary">
        Create
    </button>
</form>

After submission I swap the form with this:

<form class="form-control"
      data-te-validation-init
      data-te-validated="true"
      hx-post="/api/buildings/new"
      hx-indicator=".htmx-indicator"
      script="init call initComponents()"
>
    <div class="relative mb-3"
         data-te-input-wrapper-init
         data-te-validate="input"
         data-te-invalid-feedback="ID already created"
         data-te-validation-state="invalid"
    >
        <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 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                id="formBuildingId"
                name="id"
                placeholder="ID"
                value=""
                maxlength="20"
                oninput="limitInputToMaxLength(this)"/>
        <label
                for="formBuildingId"
                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"
        >ID
        </label>
    </div>

    <button  class="btn btn-primary">
        Create
    </button>
</form>

script="init call initComponents()" This calls initTE({Validation, Input})

But the error is not showing, is there a way to use the validation component this way?

[iprzybysz]

Hi, the data-te-validated="true" attribute should be added after every form submission to validate the element using our component. Also, to properly set a custom invalid message, data-te-invalid-feedback attribute should be added on init.

Your code should look like this:

Initial code:

<form class="form-control"
      data-te-validation-init
      hx-post="/api/buildings/new"
      hx-indicator=".htmx-indicator"
      script="init call initComponents()"
>
    <div class="relative mb-3"
         data-te-input-wrapper-init
         data-te-validate="input"
         data-te-invalid-feedback="ID already created"
    >
       ...

After submission:

<form class="form-control"
      data-te-validation-init
      data-te-validated="true"
      hx-post="/api/buildings/new"
      hx-indicator=".htmx-indicator"
      script="init call initComponents()"
>
    <div class="relative mb-3"
         data-te-input-wrapper-init
         data-te-validate="input"
         data-te-invalid-feedback="ID already created"
         data-te-validation-state="invalid"
    >
    ...

[yazalulloa]

Thanks for the response, I tested the code and it didn't work.

[iprzybysz]

Please, explain what is going on after submission. If you swap all form it won't work because the instance is not initialised on it. You should add the same logic as in the Basic Example of Validation component after submission. Could you also provide me with a sample code/snippet?

[yazalulloa]

I think I get it, I'm swapping the entire

element.

Here is a repo with the code I'm testing https://github.com/yazalulloa/tw-elements-validation-ssr

So to understand, first the elements needs to initialized, after initialization the attributes data-te-validation-state and data-te-validated needs to be added to the elements?

[yazalulloa]

After testing I figured it out, the data-te-validation-state needs to be set before the data-te-validated to trigger the validation animation, I use hyperscript to do it, thanks