golang/go-htmx-templ
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Form validation

Browse Source
This commit is contained in:
Eden Kirin
2024-01-21 21:06:26 +01:00
parent eda1d02418
commit abde90ee33
7 changed files with 407 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
app/templates/interactive.templ
View File

@ -7,7 +7,7 @@ import (
"sort"
)
templ interactiveButtons() {
templ interactiveButtonsSection() {
<h3 class="mb-3">
Interactive buttons
</h3>
@ -130,26 +130,19 @@ templ catBreedsTable(catBreeds []types.CatBreed) {
</table>
}
templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
@baseLayout(pc) {
@interactiveButtons()
@catBreedsSection(catBreeds)
}
}
templ InteractiveSwapContent(pc PageContext, contentIndex int) {
switch contentIndex {
case 1:
<p>
Some new content 1...
<p class="alert alert-info">
Bacon ipsum dolor amet t-bone meatball corned beef hamburger cupim rump drumstick tri-tip doner pastrami kielbasa salami pig. Pork loin doner leberkas, jerky fatback chuck corned beef cow rump strip steak shoulder pork belly. Flank hamburger porchetta shank sirloin bresaola chislic pork chop. Chicken jerky strip steak tongue jowl brisket cupim. Shankle t-bone short ribs fatback burgdoggen buffalo cupim prosciutto meatball pig doner boudin.
</p>
case 2:
<p>
Some new content 2...
<p class="alert alert-warning">
Rump venison tenderloin, picanha ribeye cupim pork belly sirloin landjaeger jerky prosciutto filet mignon alcatra. Short ribs pork chop rump kevin t-bone ground round hamburger, chislic tenderloin bacon sirloin filet mignon turducken beef pork loin. Buffalo picanha ground round pork chop. Venison cupim pork belly, andouille pastrami tail shankle pancetta. Picanha leberkas cupim turkey buffalo filet mignon pork belly pork chop rump sausage pork loin. Short ribs burgdoggen porchetta hamburger, cupim ribeye capicola shoulder. Pork drumstick kevin, turkey hamburger ground round burgdoggen chuck jerky bacon sausage chislic leberkas.
</p>
case 3:
<p>
Some new content 3...
<p class="alert alert-danger">
Biltong ham hock tongue, beef pork andouille fatback flank pork loin ribeye. Rump short loin porchetta, ground round buffalo hamburger salami pig venison beef ribs. Chislic beef ribs sausage fatback pork belly. Ribeye porchetta leberkas, tail hamburger biltong landjaeger short loin filet mignon chicken salami flank.
</p>
default:
<p>
@ -161,3 +154,76 @@ templ InteractiveSwapContent(pc PageContext, contentIndex int) {
templ RenderCatBreedsTable(catBreeds []types.CatBreed) {
@catBreedsTable(catBreeds)
}
templ RenderInteractiveForm(content ValidateFormContent) {
<div class="row" id="validation-form-content">
<div class="col">
<div class="mb-3">
<label for="validation-form-number" class="form-label">Enter number 0..100</label>
<input
type="text"
class={ "form-control",
templ.KV("is-invalid", content.HasNumValueError),
templ.KV("is-valid", content.Validated && !content.HasNumValueError) }
name="number-value"
id="validation-form-number"
value={ content.NumValue }
/>
if content.HasNumValueError {
<div class="invalid-feedback">{ content.NumValueError }</div>
}
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="validation-form-string" class="form-label">Enter string, length 5..10</label>
<input
type="text"
class={ "form-control",
templ.KV("is-invalid", content.HasStrValueError),
templ.KV("is-valid", content.Validated && !content.HasStrValueError) }
name="string-value"
id="validation-form-string"
value={ content.StrValue }
/>
if content.HasStrValueError {
<div class="invalid-feedback">{ content.StrValueError }</div>
}
</div>
</div>
</div>
}
templ interactiveFormSection() {
<h3 class="mb-3">
Form validation
</h3>
<form
hx-post="/interactive/validate-form"
hx-target="#validation-form-content"
hx-swap="outerHTML"
>
<div class="card p-4">
@RenderInteractiveForm(ValidateFormContent{})
<div class="d-flex">
<button type="submit" class="btn btn-success ms-auto">
Submit
</button>
</div>
</div>
</form>
}
templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
@baseLayout(pc) {
<div class="row">
<div class="col">
@interactiveButtonsSection()
</div>
<div class="col">
@interactiveFormSection()
</div>
</div>
@catBreedsSection(catBreeds)
}
}