How to change the validation state after receiving a response from the server?

[Pahomk]

How to change the validation state after receiving a response from the server?
I'm using the Vue JS 3 Composition API and Tailwind Elements 1.1.0

I am creating an authorization form with additional validation on the client side. For this I am using Tailwind Elements.
For example, to check if a field value is an email address, I use the following attribute: data-te-validation-ruleset="IsRequired|isEmail".

The client-side validation works fine.

Now I want that after submitting a form with an email address that was not previously registered and receiving a response from the server (for example: "no user with this email was found"), the email input field is also invalidated on the client side by applying the appropriate styles.

Thus. If a user entered an unregistered email address in the "Email" field (e.g. user123@gmail.com ) and clicked the "Login" button, then after the response from the server the Email field should become invalid on the client side as well.

There is an example in the Tailwind Elements documentation where you can programmatically set the field to an invalid state. But this example DOESN'T WORK if the "data-te-validation-ruleset" attribute is used additionally.

I beg everyone who is dealing with "Tailwind Elements", please help me! I spent more than 4 days and couldn't solve the problem.

[iprzybysz]

Hi @Pahomk, I think that the easier way is to only manually control the validation like in the Basic Example without setting rulesets - btw. if you don't have access to this documentation, run it locally on your machine. Check out the Local installation guide - Then depending on your response set the appropiate attribute and control your validation result.