Before submitting data to the server, it is important to ensure
all required form controls are filled out, in the correct
format. This is called client-side form validation. The
Iodine
library is used for this purpose. See more on
Github
and to the code example below.
<div>
<label class="block">
<span>Required value</span>
<input
x-effect="username.errorMessage = getErrorMessage(username.value, username.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Username"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent':!username.blurred,
'border-error': (username.blurred && username.errorMessage),
'border-success': (username.blurred && !username.errorMessage)
}"
x-model="username.value"
@blur="username.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="username.blurred && username.errorMessage"
x-text="username.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>Email Value </span>
<input
x-effect="email.errorMessage = getErrorMessage(email.value, email.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Email"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !email.blurred,
'border-error': (email.blurred && email.errorMessage),
'border-success': (email.blurred && !email.errorMessage)
}"
x-model="email.value"
@blur="email.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="email.blurred && email.errorMessage"
x-text="email.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>Min/Max </span>
<input
x-effect="minmax.errorMessage = getErrorMessage(minmax.value, minmax.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Number between 5 - 15"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !minmax.blurred,
'border-error': (minmax.blurred && minmax.errorMessage),
'border-success': (minmax.blurred && !minmax.errorMessage)
}"
x-model="minmax.value"
@blur="minmax.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="minmax.blurred && minmax.errorMessage"
x-text="minmax.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>Min/Max Length</span>
<input
x-effect="minmaxLength.errorMessage = getErrorMessage(minmaxLength.value, minmaxLength.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="String length between 5 to 15"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !minmaxLength.blurred,
'border-error': (minmaxLength.blurred && minmaxLength.errorMessage),
'border-success': (minmaxLength.blurred && !minmaxLength.errorMessage)
}"
x-model="minmaxLength.value"
@blur="minmaxLength.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="minmaxLength.blurred && minmaxLength.errorMessage"
x-text="minmaxLength.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>URL Address</span>
<input
x-effect="url.errorMessage = getErrorMessage(url.value, url.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Only URL"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !url.blurred,
'border-error': (url.blurred && url.errorMessage),
'border-success': (url.blurred && !url.errorMessage)
}"
x-model="url.value"
@blur="url.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="url.blurred && url.errorMessage"
x-text="url.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>Instagram Username</span>
<input
x-effect="instagramUsername.errorMessage = getErrorMessage(instagramUsername.value, instagramUsername.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Instagram Username"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !instagramUsername.blurred,
'border-error': (instagramUsername.blurred && instagramUsername.errorMessage),
'border-success': (instagramUsername.blurred && !instagramUsername.errorMessage)
}"
x-model="instagramUsername.value"
@blur="instagramUsername.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="instagramUsername.blurred && instagramUsername.errorMessage"
x-text="instagramUsername.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>Start With A</span>
<input
x-effect="startWith.errorMessage = getErrorMessage(startWith.value, startWith.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Start With A"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !startWith.blurred,
'border-error': (startWith.blurred && startWith.errorMessage),
'border-success': (startWith.blurred && !startWith.errorMessage)
}"
x-model="startWith.value"
@blur="startWith.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="startWith.blurred && startWith.errorMessage"
x-text="startWith.errorMessage"
></span>
</div>
<div>
<label class="block">
<span>End With Z</span>
<input
x-effect="endWith.errorMessage = getErrorMessage(endWith.value, endWith.validate)"
class="form-input mt-1.5 w-full rounded-lg border bg-transparent px-3 py-2 placeholder:text-slate-400/70"
placeholder="Start With A"
type="text"
:class="{
'border-slate-300 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent': !endWith.blurred,
'border-error': (endWith.blurred && endWith.errorMessage),
'border-success': (endWith.blurred && !endWith.errorMessage)
}"
x-model="endWith.value"
@blur="endWith.blurred = true"
/>
</label>
<span
class="text-tiny+ text-error"
x-show="endWith.blurred && endWith.errorMessage"
x-text="endWith.errorMessage"
></span>
</div>
