AdminCN
Dashboard Template

Validation Types

Required Field
Numeric Only
Alphabetic Only
Password
Min & Max Length
Email
Number Range
Regex Pattern
Exact Length
Digits
Alphanumeric & Symbols
URL

Validation Modes Demo

Experience how different validation modes affect user experience. Try typing in each field to see when validation occurs.

onChange Mode

Validates on every keystroke

Demo Input

Error appears instantly as you type

onBlur Mode

Validates when you leave the field

Demo Input

Error appears after you leave the field

onSubmit Mode (Default)

Validates only when you click submit

Demo Input

Error appears only after clicking submit

onTouched Mode

Validates on blur, then on every change

Demo Input

First validation on blur, then real-time

Mode When Validation Occurs Best For
onChangeEvery keystroke Real-time feedback (e.g., password strength)
onBlurWhen leaving the field Less intrusive validation (recommended for most cases)
onSubmitWhen form is submitted Simple forms, minimal interruption
onTouched First blur, then every change Balance between UX and feedback

Registration Form

Personal Information

Please provide your basic information

Full Name

Your full name as it appears on official documents

Email Address

This field is required

Password

Must be at least 8 characters with uppercase, lowercase, and numbers

Profile Details

Tell us more about yourself

Date of Birth

Select your date of birth

Age

You must be at least 18 years old to register

Country

Your country of residence

Preferred Language (Optional)

Choose your preferred communication language

Bio

Brief description about yourself (0/500 characters)

Preferences

Customize your experience

Newsletter Topics

Choose the topics you want to receive updates about

Product Updates
Industry News
Tips & Tricks

Communication Settings

Manage your notification preferences

Email Notifications Receive notifications about your account activity
Marketing Emails Receive emails about new products and features
Two-Factor Authentication Add an extra layer of security to your account

Account Type

Choose the plan that best fits your needs