Problems with validation of elements in the form

[benrojas01]

Please can you tell me the correct way to validate the elements of a form, since when sending the post it makes the exchange regardless of whether the fields are empty and with the required property

thanks

[alexandre-dos-reis]

@benrojas01 Can you please post your code here ?

[Telroshan]

Could hx-validate solve your usecase here?

[Iamrodos]

Having this issue too.

An example form input and submit button might be.

<input type="email" class="form-control" name="email" autocomplete="off" 
  hx-validate="true" value="{{person.email}}" >
<button type="button" class="btn btn-primary"
   hx-post="/person/{{person.id}}"
   hx-target="#personCard"
   hx-indicator="#working-icon"
>Save</button>

The above fails to validate that the input is a valid email address, which the type enforces. If you do a normal submit button validation occurs and the user is informed of the failure and the submit is not done.

<button type="submit" class="btn btn-primary" >Add Person</button>

[Iamrodos]

Could hx-validate solve your usecase here?

My suspicion is this only works when the htmx action is on that input, not some other button on the form which captures and sends the inputs.

[Iamrodos]

Found a resolution for this from https://www.reddit.com/r/htmx/comments/182y0z3/htmx_client_validation/. The htmx needs to go on the form not on the button. When done this way the validations are enforced. Here is a working example.

<form 
  hx-post="/person/{{person.id}}"
  hx-target="#personCard"
  hx-indicator="#working-icon"
 >
<input type="hidden" name="csrf" value="{{user['csrf']}}">
<input type="email" class="form-control" name="email" autocomplete="off"  value="{{person.email}}" >
<div class="text-end">
   <button type="post" class="btn btn-primary" >Save</button>
</div>
</form>

[perepicornell]

Hi!

This solution apparently works only if the post is triggered by form's submit (which is the default behavior if you don't specify hx-trigger):

Found a resolution for this from https://www.reddit.com/r/htmx/comments/182y0z3/htmx_client_validation/. The htmx needs to go on the form not on the button. When done this way the validations are enforced. Here is a working example.

<form 
  hx-post="/person/{{person.id}}"
  hx-target="#personCard"
  hx-indicator="#working-icon"
 >
<input type="hidden" name="csrf" value="{{user['csrf']}}">
<input type="email" class="form-control" name="email" autocomplete="off"  value="{{person.email}}" >
<div class="text-end">
   <button type="post" class="btn btn-primary" >Save</button>
</div>
</form>

We're triggering the POST request on change, like this:

    <form
      id="id_form"
      method="post"
      hx-encoding="multipart/form-data"
      hx-post="{% url 'ecotags:publication' pk=ecotag.pk %}"
      hx-target="#hx-form"
      hx-trigger="change"
      hx-swap-oob="true"
    >

So the form doesn't have a submit button, its sent every time you modify and leave a field.

Now the controls that have validation, lique required, don't trigger the browser's validation and also don't trigger the POST. That is: I delete the content of the field, I leave the field, and no request is triggered.

I tried including hx-validate="true" in both the form and each of the fields, and none of it had any effect.

So unless I'm missing something, when you use hx-trigger="change" in a form, there's no way to enable the browser's validation for the fields.

Edit: for those hitting this point, when you're using hx-trigger="change" in the form, and you want to completely disable the browser's validation, it's not that obvious. I tried the novalidate property in the form and also in the fields, but it looked like it was ignored.
It's not that obvious how to make it work.
In the form: you need to add the novalidate and also the hx-validate="false" properties. There's no need to change anything to the fields.
Now the form is just send regardless of the input types, requireds, etc.

[Telroshan]

I tried including hx-validate="true" in both the form and each of the fields, and none of it had any effect.

Looking at hx-validate code, it looks like it should handle this case by default

htmx/src/htmx.js

Lines 3467 to 3472 in c5e82ba

	// only validate when form is directly submitted and novalidate or formnovalidate are not set
	// or if the element has an explicit hx-validate="true" on it
	let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
	if (internalData.lastButtonClicked) {
	validate = validate && internalData.lastButtonClicked.formNoValidate !== true
	}

There doesn't seem to be any logic to handle validation only for a standard submit event, so that's likely a bug that it's not working for a change-trigger-based submit.

Htmx is supposed to fire htmx:validation:validate when checking validity of an element, can't test right now, would you mind checking if adding a console log in an event listener for this event gives you anything @perepicornell ?

htmx/src/htmx.js

Lines 3423 to 3426 in c5e82ba

	function validateElement(elt, errors) {
	const element = /** @type {HTMLElement & ElementInternals} */ (elt)
	if (element.willValidate) {
	triggerEvent(element, 'htmx:validation:validate')

Just to see whether htmx reaches this point or not at all

[perepicornell]

Hi @Telroshan, when trying this I enabled htmx.logAll() and I saw that it was firing htmx:validation:halt.

I confirmed it now and I see that it fires a htmx:validation:validate for each field and after that, a htmx:configRequestand then the halt.
In that case, the field that I'm testing is type="number" and required, and either leaving it empty or entering letters triggers this halt.
Let me know if you need any other information, and thanks for taking a look!

[Telroshan]

Ok I just realized I read your message incorrectly @perepicornell

I thought you were still seing the requests happening, my bad.

Took a look and htmx calls checKValidity on the elements to validate, which works fine and correctly prevents the request from happening if any element is invalid.
Htmx then fires the htmx:validation:failed event if the element is invalid, but never calls the method reportValidity that would display the problem to the user, which I think is what you would expect by default from htmx validation, as that's what the default form validation does after all!

The reportValidity doc states

The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the checkValidity() method. In addition, if the invalid event is not canceled, the browser displays the problem to the user.

So I would say we can probably just replace the checkValidity call by a reportValidity in htmx, since :

• reportValidity performs the same validity check as checkValidity
• it will display the default validation messages you would expect
• it already has a cancellation method baked in, letting you cancel this message display by cancelling the invalid event, so we shouldn't need to add any support ourselfor that

If you'd like to open a PR to address this, please feel free to do so!

For the moment being, it seems that this little snippet would be a good workaround:

document.body.addEventListener("htmx:validation:failed", function (event) {
    event.detail.elt.reportValidity()
})

[perepicornell]

Hey, thanks again, also for this snippet, good to know that there's a workaround if needed, although we opted for full server-side validation which works perfectly fine in that case :)

Sorry I cannot contribute with a PR 🙏 my knowledge of JS is super basic.

But if I should report it somewhere else or help with more information please let me know.

[Telroshan]

No worries! I'll take a look when I have the chance

[yawaramin]

@perepicornell you can do a mix of both: https://dev.to/yawaramin/handling-form-errors-in-htmx-3ncg