Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Russell Crowe
russellcrowe@left4code.com
Al Pacino
alpacino@left4code.com
Johnny Depp
johnnydepp@left4code.com
John Travolta
johntravolta@left4code.com
Products
Dell XPS 13
PC & Laptop
Apple MacBook Pro 13
PC & Laptop
Nikon Z6
Photography
Sony A7 III
Photography

## Form Validation

## Implementation

Show example code
Name Required, at least 2 characters
Email Required, email address format
Password Required, at least 6 characters
Age Required, integer only & maximum 3 characters
Profile URL Optional, URL format
Comment Required, at least 10 characters
Registration success!
Please check your e-mail for further info!
Registration failed!
Please check the fileld form.

      HTMLOpenTag!-- BEGIN: Validation Form --HTMLCloseTag HTMLOpenTagform class="validate-form"HTMLCloseTag HTMLOpenTagdiv class="input-form"HTMLCloseTag HTMLOpenTaglabel for="validation-form-1" class="form-label w-full flex flex-col sm:flex-row"HTMLCloseTag Name HTMLOpenTagspan class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"HTMLCloseTagRequired, at least 2 charactersHTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="validation-form-1" type="text" name="name" class="form-control" placeholder="John Legend" minlength="2" requiredHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag HTMLOpenTaglabel for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row"HTMLCloseTag Email HTMLOpenTagspan class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"HTMLCloseTagRequired, email address formatHTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="validation-form-2" type="email" name="email" class="form-control" placeholder="example@gmail.com" requiredHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag HTMLOpenTaglabel for="validation-form-3" class="form-label w-full flex flex-col sm:flex-row"HTMLCloseTag Password HTMLOpenTagspan class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"HTMLCloseTagRequired, at least 6 charactersHTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="validation-form-3" type="password" name="password" class="form-control" placeholder="secret" minlength="6" requiredHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag HTMLOpenTaglabel for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row"HTMLCloseTag Age HTMLOpenTagspan class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"HTMLCloseTagRequired, integer only & maximum 3 charactersHTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="validation-form-4" type="number" name="age" class="form-control" placeholder="21" requiredHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag HTMLOpenTaglabel for="validation-form-5" class="form-label w-full flex flex-col sm:flex-row"HTMLCloseTag Profile URL HTMLOpenTagspan class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"HTMLCloseTagOptional, URL formatHTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="validation-form-5" type="url" name="url" class="form-control" placeholder="https://google.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-form mt-3"HTMLCloseTag HTMLOpenTaglabel for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row"HTMLCloseTag Comment HTMLOpenTagspan class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"HTMLCloseTagRequired, at least 10 charactersHTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/labelHTMLCloseTag HTMLOpenTagtextarea id="validation-form-6" class="form-control" name="comment" placeholder="Type your comments" minlength="10" requiredHTMLCloseTagHTMLOpenTag/textareaHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton type="submit" class="btn btn-primary mt-5"HTMLCloseTagRegisterHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/formHTMLCloseTag HTMLOpenTag!-- END: Validation Form --HTMLCloseTag HTMLOpenTag!-- BEGIN: Success Notification Content --HTMLCloseTag HTMLOpenTagdiv id="success-notification-content" class="toastify-content hidden flex" HTMLCloseTag HTMLOpenTagi class="text-success" data-lucide="check-circle"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagRegistration success!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTag Please check your e-mail for further info! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Success Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Failed Notification Content --HTMLCloseTag HTMLOpenTagdiv id="failed-notification-content" class="toastify-content hidden flex" HTMLCloseTag HTMLOpenTagi class="text-danger" data-lucide="x-circle"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagRegistration failed!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTag Please check the fileld form. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Failed Notification Content --HTMLCloseTag

Dark Mode