Validation - Midone - Tailwind HTML Admin Template

Pages

Users

Russell Crowe

russellcrowe@left4code.com

Denzel Washington

denzelwashington@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Morgan Freeman

morganfreeman@left4code.com

Products

Nike Air Max 270

Sport & Outdoor

Samsung Galaxy S20 Ultra

Notifications

Russell Crowe

06:05 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Denzel Washington

01:10 PM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Kevin Spacey

05:09 AM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Morgan Freeman

06:05 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Russell Crowe

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Form Validation

Implementation

Show 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

                                          <form class="validate-form">
     <div> <label class="flex flex-col sm:flex-row"> Name <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600">Required, at least 2 characters</span> </label> <input type="text" name="name" class="input w-full border mt-2" placeholder="John Legend" minlength="2" required> </div>
     <div class="mt-3"> <label class="flex flex-col sm:flex-row"> Email <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600">Required, email address format</span> </label> <input type="email" name="email" class="input w-full border mt-2" placeholder="example@gmail.com" required> </div>
     <div class="mt-3"> <label class="flex flex-col sm:flex-row"> Password <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600">Required, at least 6 characters</span> </label> <input type="password" name="password" class="input w-full border mt-2" placeholder="secret" minlength="6" required> </div>
     <div class="mt-3"> <label class="flex flex-col sm:flex-row"> Age <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600">Required, integer only & maximum 3 characters</span> </label> <input type="number" name="age" class="input w-full border mt-2" placeholder="21" required> </div>
     <div class="mt-3"> <label class="flex flex-col sm:flex-row"> Profile URL <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600">Optional, URL format</span> </label> <input type="url" name="url" class="input w-full border mt-2" placeholder="https://google.com"> </div>
     <div class="mt-3"> <label class="flex flex-col sm:flex-row"> Comment <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600">Required, at least 10 characters</span> </label> <textarea class="input w-full border mt-2" name="comment" placeholder="Type your comments" minlength="10" required></textarea> </div> <button type="submit" class="button bg-theme-1 text-white mt-5">Register</button>
 </form> 
                                    