New way of form validation

[bugeo]

In the examples on form validation I have seen that this approach is followed:

1. the form is posted to the server
2. the server perform the validations
3. in case of error the form is recreated and sent back

This method has two disadvantages.

1. to restore a value of a password field it is necessary to write the password entered by the user in the "value" attribute and this can compromise the security.
2. is not very efficient if the form contains select with many values

Solution
It would be possible, if the validation of the form is not successful, to send the client only the errors to be displayed in the form.
It would be possible to do this by using the hx-swap-oob = "true" attribute for each error.

Example of the form:

<form hx-get = "/ Form / Validate" hx-swap = "none">

Username:
<input type = "text" value = "username">
<div id = "username_error"> </div>

Password:
<input type = "text" value = "password">
<div id = "password_error"> </div>

<button type = "submit"> Send </ button

</form>

Response from the server

<div id = "username_error" hx-swap-oob = "true"> Required! </div>
<div id = "username_password" hx-swap-oob = "true"> Required! </div>

When these errors are sent back to the client, they are added to the incorrect fields.
The form, and all the inpunt fields are not deleted and recreated.

[dsaghliani]

How would this work when you want to modify the input fields and add a class/attribute to, for example, give them a red outline?

This isn't a criticism but a genuine question. I suppose you could listen to htmx:beforeSwap and hack something together, but I'm new to htmx, so if there's a better way, I'd love to hear it.

---

And on that note, if you're using HTTPS, what are the risks involved with sending the password over the wire? You've got to send it at least once—to the server—so does sending it back make any difference?

[antidotejack]

I had a similar issue with where I was comparing if the 2 pass-word fields had the same value in the CLIENT side. What I did, was using html built in form validation and then prevented the form request by listening in Javascript (JS) for the "htmx:beforeSend" event, that bubbles when the element triggers the request; which I can prevent with the "preventDefault()" JS after my custom validation.

<script>
const formElement= document.querySelector('form');

formElement.addEventListener('htmx:beforeSend', (event) => {
    if ( formElement.passwordField.value !== formElement.confirmField.value ) {
        event.preventDefault();
        //trigger a warning
    }
});
</script>

This way the form is not submitted if it doesn't meet the criterion, saving a few request to the server.

I know I'm a year late but this may help beginners like me some headaches.