itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the inline validation example by using a post request

Browse Source
This commit is contained in:
Loric Brevet 2021-09-12 15:22:15 +02:00
parent 6d85d1ae5b
commit 12fcc51124
No known key found for this signature in database
GPG Key ID: FDC2D375DE2AC2D8
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/examples/inline-validation.md
View File

@ -15,7 +15,7 @@ We start with this form:
<form hx-post="/contact"> <form hx-post="/contact">
<div hx-target="this" hx-swap="outerHTML"> <div hx-target="this" hx-swap="outerHTML">
<label>Email Address</label> <label>Email Address</label>
<input name="email" hx-get="/contact/email" hx-indicator="#ind"> <input name="email" hx-post="/contact/email" hx-indicator="#ind">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/> <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -94,7 +94,7 @@ Below is a working demo of this example. The only email that will be accepted i
return formTemplate(); return formTemplate();
}); });
onGet(/\/contact\/email.*/, function(request, params){ onPost(/\/contact\/email.*/, function(request, params){
var email = params['email']; var email = params['email'];
if(!/\S+@\S+\.\S+/.test(email)) { if(!/\S+@\S+\.\S+/.test(email)) {
return emailInputTemplate(email, "Please enter a valid email address"); return emailInputTemplate(email, "Please enter a valid email address");
@ -115,7 +115,7 @@ Below is a working demo of this example. The only email that will be accepted i
return `<form hx-post="/contact"> return `<form hx-post="/contact">
<div hx-target="this" hx-swap="outerHTML"> <div hx-target="this" hx-swap="outerHTML">
<label>Email Address</label> <label>Email Address</label>
<input name="email" hx-get="/contact/email" hx-indicator="#ind"> <input name="email" hx-post="/contact/email" hx-indicator="#ind">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/> <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -133,7 +133,7 @@ Below is a working demo of this example. The only email that will be accepted i
function emailInputTemplate(val, errorMsg) { function emailInputTemplate(val, errorMsg) {
return `<div hx-target="this" hx-swap="outerHTML" class="${errorMsg ? "error" : "valid"}"> return `<div hx-target="this" hx-swap="outerHTML" class="${errorMsg ? "error" : "valid"}">
<label>Email Address</label> <label>Email Address</label>
<input name="email" hx-get="/contact/email" hx-indicator="#ind" value="${val}"> <input name="email" hx-post="/contact/email" hx-indicator="#ind" value="${val}">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/> <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
${errorMsg ? ("<div class='error-message'>" + errorMsg + "</div>") : ""} ${errorMsg ? ("<div class='error-message'>" + errorMsg + "</div>") : ""}
</div>`; </div>`;