Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

hx-post ignores form validation if form is not triggered directly. #398

Closed
BoPeng opened this issue Mar 2, 2021 · 2 comments
Closed

hx-post ignores form validation if form is not triggered directly. #398

BoPeng opened this issue Mar 2, 2021 · 2 comments

Comments

@BoPeng
Copy link
Contributor

BoPeng commented Mar 2, 2021 •
edited

This is essentially the same bug as #396 but expressed in a different way with a concrete example.

Suppose I have a simple flask app that supports GET and POST of test.html with the following page

<!DOCTYPE html>
<html lang="en">
<body>
  <form action="{{ request.path }}" method='post'>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="like" required>
  <button>Submit</button>
  <a href='#' hx-post="{{ request.path }}">hx-post</a>
</form>
</body>
  <script src="https://unpkg.com/htmx.org@1.2.1"></script>
</html>

If I do not enter anything and press submit, the form is not submitted

image

If I enter cherry, the form can be submitted.

However, if I leave the input blank and press hx-post, the form is submitted regardless of the required property of <input id="choose" name="like" required>.

image

The root cause is that hx-post does not trigger the submit event of the form and bypasses HTML form validation. If hx-post is designed NOT to dispatch a submit event, there should be a way to easily do that. A hyperscript trick might help.
This was referenced Mar 2, 2021
Closed
Open
Closed
@BoPeng BoPeng changed the title hx-post ignores form validation. hx-post ignores form validation if form is not triggered directly. Mar 2, 2021
@BoPeng
Copy link
Contributor Author

BoPeng commented Mar 2, 2021 •
edited

It turns out that the reason for no validation is that hx-post is placed in <a>, not on <form>. A PR (#400) is submitted.

@BoPeng BoPeng mentioned this issue Mar 2, 2021
Merged
@1cg 1cg closed this as completed Aug 28, 2022
@1cg 1cg reopened this Aug 28, 2022
@1cg 1cg closed this as completed Aug 28, 2022
@simondrabble
Copy link

I'm seeing this behaviour with a trigger outside of the form:

<form action="/save-things" method="post" id="the-form"><input name="data" type="text" required></form>
<button
    hx-post="/save-things"
    hx-include="#the-form">Save</button>

The form will be submitted via hx-post even if the input is empty.

Example here: https://jsfiddle.net/g8akjpn1/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@1cg @simondrabble @BoPeng