62 lines
2.0 KiB
Plaintext
62 lines
2.0 KiB
Plaintext
package site
|
|
|
|
import (
|
|
"fmt"
|
|
datastar "github.com/starfederation/datastar/sdk/go"
|
|
)
|
|
|
|
type inlineValidationUser struct {
|
|
FirstName string `json:"firstName"`
|
|
LastName string `json:"lastName"`
|
|
Email string `json:"email"`
|
|
}
|
|
|
|
templ inlineValidationFieldComponent(label, field string, isValid bool, isNotValidErrorLabelFmt string, labelArgs ...any) {
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">{ label }</span>
|
|
</label>
|
|
<input
|
|
class={ "input input-bordered", templ.KV("input-error",!isValid) }
|
|
data-bind={ field }
|
|
data-on-keydown__debounce.500ms={ datastar.GetSSE("/examples/inline_validation/data") }
|
|
data-testid={ "input_" + field }
|
|
/>
|
|
if !isValid {
|
|
<label class="text-sm font-bold text-error" data-testid={ "validation_" + field }>{ fmt.Sprintf( isNotValidErrorLabelFmt, labelArgs...) }</label>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ inlineValidationUserComponent(u *inlineValidationUser, isEmailValid, isFirstNameValid, isLastNameValid, isValid bool) {
|
|
<div
|
|
id="inline_validation"
|
|
class="flex flex-col gap-4"
|
|
data-signals__ifmissing={ templ.JSONString(u) }
|
|
>
|
|
<div class="text-2xl font-bold">Sign Up</div>
|
|
<div>
|
|
@inlineValidationFieldComponent("Email Address", "email", isEmailValid, "Email '%s' is already taken or is invalid. Please enter another email.", u.Email)
|
|
@inlineValidationFieldComponent("First Name", "firstName", isFirstNameValid, "First name must be at least 2 characters.")
|
|
@inlineValidationFieldComponent("Last Name", "lastName", isLastNameValid, "Last name must be at least 2 characters.")
|
|
</div>
|
|
<button
|
|
class="btn btn-success"
|
|
disabled?={ !isValid }
|
|
data-on-click={ datastar.PostSSE("/examples/inline_validation/data") }
|
|
data-testid="submit_button"
|
|
>
|
|
@icon("material-symbols:person-add")
|
|
Add User
|
|
</button>
|
|
<div class="divider"></div>
|
|
</div>
|
|
}
|
|
|
|
templ inlineValidationThankYou() {
|
|
<div id="inline_validation" class="alert alert-success">
|
|
@icon("material-symbols:check-circle")
|
|
Thank you for signing up!
|
|
</div>
|
|
}
|