I am looking to implement this on a craft user registration form.
Currently the form uses sprig as follows:
<form sprig method="post" s-method="post" s-action="users/save-user" s-indicator="#spinner" accept-charset="UTF-8" class="space-y-6">
{{ csrfInput() }}
{{ actionInput('users/save-user') }}
{{ redirectInput('') }}
<div>
<div class="flex justify-between">
<label for="firstName" class="{{ classes.forms.label }}">First Name</label>
<span class="{{ classes.forms.inputNote }}" id="firstName--required">Required</span>
</div>
<div class="mt-1 relative {{ (user ? user.getErrors('firstName')) ? "focus:border-red-200" }}">
{{ input('text', 'firstName', user.firstName ?? null, {
id: 'firstName',
autocomplete: 'first-name',
class: [
classes.forms.input,
(user ? user.hasErrors('firstName')) ? classes.forms.errorsInputField
]
}) }}
{{ user ? forms.errorList(user.getErrors('firstName')) }}
</div>
</div>
<div>
<div class="flex justify-between">
<label for="lastName" class="{{ classes.forms.label }}">Last Name</label>
<span class="{{ classes.forms.inputNote }}" id="lastName--required">Required</span>
</div>
<div class="mt-1 relative {{ (user ? user.getErrors('lastName')) ? "focus:border-red-200" }}">
{{ input('text', 'lastName', user.lastName ?? null, {
id: 'lastName',
autocomplete: 'last-name',
class: [
classes.forms.input,
(user ? user.hasErrors('lastName')) ? classes.forms.errorsInputField
]
}) }}
{{ user ? forms.errorList(user.getErrors('lastName')) }}
</div>
</div>
<div>
<div class="flex justify-between">
<label for="email" class="{{ classes.forms.label }}">Email</label>
<span class="{{ classes.forms.inputNote }}" id="email--required">Required</span>
</div>
<div class="mt-1 relative {{ (user ? user.getErrors('email')) ? "focus:border-red-200" }}">
{{ input('email', 'email', user.email ?? null, {
id: 'email',
autocomplete: 'email',
class: [
classes.forms.input,
(user ? user.hasErrors('email')) ? classes.forms.errorsInputField
]
}) }}
{{ user ? forms.errorList(user.getErrors('email')) }}
</div>
</div>
<div>
<div class="flex justify-between">
<label for="password" class="{{ classes.forms.label }}">Password</label>
<span class="{{ classes.forms.inputNote }}" id="email--required">Required</span>
</div>
<div class="mt-1 relative {{ (user ? user.getErrors('password')) ? "focus:border-red-200" }}">
{{ input('password', 'password', null, {
id: 'password',
class: [
classes.forms.input,
(user ? user.hasErrors('password')) ? classes.forms.errorsInputField
]
}) }}
{{ user ? forms.errorList(user.getErrors('password')) }}
</div>
<div class="flex items-start mt-2 text-xs text-slate-400">
{{ svg('@icons/bx-line/bx-info-circle.svg')|attr({class: "w-4 h-4 flex-shrink-0 fill-current mr-1"}) }}
<div>
Passwords must be at least 8 characters long and must contain at least one uppercase letter and one number.
</div>
</div>
</div>
<div class="{{ user and user.getErrors('fields[hunayfax]') ? '' : 'hidden' }}">
<div class="flex justify-between">
<label for="fields[hunayfax]" class="{{ classes.forms.label }}">If you are human please leave this field empty.</label>
</div>
<div class="mt-1 relative {{ (user ? user.getErrors('hunayfax')) ? "focus:border-red-200" }}">
<input id="hunayfax"
type="text"
name="fields[hunayfax]"
class="{{ classes.forms.input }} {{ (user ? user.getErrors('hunayfax')) ? classes.forms.errorsInputField }}"
/>
{{ user ? forms.errorList(user.getErrors('password')) }}
</div>
</div>
<button type="submit" class="{{ classes.btn.base ~ ' ' ~ classes.btn.blue }} w-48">
<span class="mr-2">
Register
</span>
<div>
<div id="spinner" class="htmx-indicator spinner2">
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
{{ svg('@icons/hero/solid/arrow-narrow-right.svg')|attr({
class:"w-4 h-4 flex-shrink-0 fill-current mx-1.5 icon"
}) }}
</button>
</form>[HTTP 400 – Bad Request](http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#400) – [yii\web\BadRequestHttpException](http://www.yiiframework.com/doc-2.0/yii-web-badrequesthttpexception.html)
Post request required
public function requirePostRequest()
{
if (!$this->request->getIsPost()) {
throw new BadRequestHttpException('Post request required');
}
}
However, not seeing the standard error message as it should show.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent