RSK World - Form Validation Demo | Real-time Validation, Visual Feedback, Accessible | RSK World

Real-time Validation Password & Strength Theme & Draft Modal & Progress Vanilla JS

Form Validation Demo is a real-time form validation page with visual feedback and accessible design. Includes: field-level validation for full name, email, phone, password, confirm password, message, and terms; password strength meter (Weak/Medium/Strong); progress indicator (X/7 fields valid); theme toggle (Light/Dark/System) with localStorage; draft auto-save with Restore/Discard banner; success modal on submit; message character count (warning at 450, danger at 500); debounced email "Checking..." state; shake animation on invalid submit; skip link and ARIA attributes. Files: index.html, styles.css, themes.css, script.js, validation-rules.js, utils.js. By rskworld.in.

If you find this Form Validation Demo project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Form Validation Demo

Real-time Validation

Fields validate on blur and on input after first touch. script.js: validateField(), setFieldValidity(), runFieldValidation() for fullname, email, phone, password, confirmPassword, message, terms. validation-rules.js: fullname(), email(), phone(), password(), confirmPassword(), message(), terms() with clear error messages.

script.js: validateField(), setFieldValidity(), runFieldValidation() – core validation orchestration for all seven form fields with instant feedback.
validation-rules.js: centralized rules per field – fullname (2–100 chars), email (valid format), phone (optional, 10–20 chars), password (min 8, uppercase + number), confirm password match, message (10–500 chars), terms required.
Visual states: .valid / .invalid with inline ✓/✗ status icons – clear success (green) and error (red) styling so users see validation results at a glance.
Form-level summary and focus first invalid on submit – "Please fix the errors below" plus automatic focus on the first invalid field for better accessibility and UX.
Real-time validation on blur and on input after first touch – reduces annoying early errors while still validating as the user types once a field has been touched.
Field-level error messages – each invalid field shows a specific message (e.g. "Email is required", "Passwords do not match") for easier correction.

Project Structure & Files

Root: index.html (form markup, sections, theme toggle, progress, draft banner, success modal). CSS: styles.css (layout, validation states, strength meter, modal, animations), themes.css (light/dark/system variables). JS: script.js (orchestration), validation-rules.js (rules + password strength), utils.js (debounce, localStorage). No build step.

index.html – semantic form markup with sections (Contact, Security, Message), ARIA attributes, and "Skip to form" link for keyboard and screen reader users.
styles.css, themes.css – layout, validation states (valid/invalid), strength meter, modal, animations, and light/dark/system theme CSS variables for consistent theming.
script.js, validation-rules.js, utils.js – vanilla JavaScript only; no frameworks or build tools required for form validation, draft save, and theme switching.
No build step – open index.html in a browser or serve the folder with any static server; ideal for learning and quick integration into existing projects.
LICENSE (MIT) and README.md included – free to use, modify, and distribute with clear documentation of features and usage for developers and educators.

Password Strength & Theme

validation-rules.js: getPasswordStrength() – score from length, mixed case, digit, special char; levels Weak/Medium/Strong. themes.css + utils.js: Light/Dark/System theme via data-theme on documentElement; preference saved in localStorage (form-validation-demo-theme). Respects prefers-color-scheme for system.

getPasswordStrength(): level 0–3 with labels Weak, Medium, Strong – scores length, mixed case, digits, and special characters for clear password security feedback.
Strength bar and label; confirm password re-validates on password change – live "Passwords do not match" or success check as the user types in either field.
Theme toggle: Light, Dark, System – preference saved in localStorage (form-validation-demo-theme) and applied on load; System follows OS prefers-color-scheme for best UX.
utils.js: getSavedTheme(), setSavedTheme(), applyTheme() – theme logic isolated in utils for easy reuse; data-theme on document root drives CSS variable switching.
Accessible theme buttons with aria-pressed – screen readers and keyboard users can tell which theme is active and switch between Light, Dark, and System easily.

Draft Auto-save & Success Modal

utils.js: saveDraft(), loadDraft(), clearDraft() with key form-validation-demo-draft. script.js: getDraftData(), applyDraft(), saveDraftDebounced (800 ms). Draft banner: Restore / Discard. On valid submit: clearDraft(), show success modal; modal closes on button, backdrop click, or Escape.

Draft saved to localStorage with 800 ms debounce – form state (all seven fields) is saved automatically as the user types, so returning visitors do not lose data.
Banner: "You have a saved draft" – Restore or Discard – clear call-to-action when a previous draft exists; Restore fills the form and runs validation, Discard clears the draft.
Success modal with focus management and Escape to close – animated success dialog instead of alert(); focus moves to Close button and Escape or backdrop click closes it for accessibility.
Draft cleared on successful submit – after a valid submission the saved draft is removed so the next visit starts with a clean form and no stale draft banner.
getDraftData(), applyDraft() in script.js – draft serialization and restoration logic keeps form and localStorage in sync; supports text inputs, textarea, and checkbox (terms).

Progress & Message Count

script.js: updateProgress() – "X / 7 fields valid" and progress bar; bar turns success when all valid. updateMessageCount() – "0 / 500" under textarea; .warning at 450+, .danger at 500. Email debounced "Checking..." (400 ms) then re-validation.

Progress: X/7 fields valid, progress bar, aria-valuenow – live "0 / 7 fields valid" text and fill bar; bar turns green when all fields are valid for quick visual feedback.
Message: character count "0 / 500" with warning (450+) and danger (500) classes – color-coded count so users know when they are near or at the limit without submitting.
Email: debounced "Checking..." then validation – 400 ms debounce shows "Checking..." then runs email validation after 600 ms for a realistic async-check feel and better UX.
Shake animation on invalid submit – form shakes briefly when the user submits with errors, drawing attention to the form-level message and first invalid field.
updateProgress() and updateMessageCount() – progress and character count stay in sync on blur, input, and reset for accurate, real-time feedback.

What You Get

Static HTML/CSS/JS: index.html, styles.css, themes.css, script.js, validation-rules.js, utils.js, LICENSE. README with features and usage. No build step. Open index.html or serve folder. Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Complete source – all HTML, CSS and JS files (index.html, styles.css, themes.css, script.js, validation-rules.js, utils.js) ready to copy, customize, or embed in your project.
No build step – open index.html in a browser or serve the folder with any static server; no npm, webpack, or bundler required for form validation and theme switching.
README.md with usage and customization – feature list, file purposes, technologies, author info, and step-by-step usage for developers and educators learning form validation.
Technologies: HTML5, CSS3, Vanilla JS – standard web stack only; works in all modern browsers and is easy to maintain. © 2026 RSK World.
MIT License – free to use, modify, and distribute; suitable for personal, educational, and commercial projects with minimal attribution requirements.

Usage

Open index.html to use the form. Fill fields; validation runs on blur and on input after touch. Submit for full validation; first invalid field receives focus. Use theme toggle for Light/Dark/System. Restore or Discard draft from banner if present. Success modal appears on valid submit.

index.html – form with 7 validated fields (full name, email, phone, password, confirm password, message, terms); open in browser to start using immediately.
Validation on blur and input after touch/submit – fill fields and tab or click away to see validation; after first touch or after submit, validation also runs on every keystroke.
Theme toggle and draft Restore/Discard – use Light, Dark, or System in the header; if a draft exists, use Restore to fill the form or Discard to clear it and start fresh.
Author: RSK World | rskworld.in – free programming resources and source code; contact for customization, integration help, or more UI/UX demos and tutorials.

Project Features

Real-time validation with visual feedback; password strength meter; confirm password match; progress indicator; theme toggle (Light/Dark/System); draft auto-save; success modal; email "Checking..." debounce; message character count; shake on invalid submit; skip link; ARIA, focus management, reduced motion. All vanilla JS.

Real-time validation: blur + input after touch, with field-level error messages so users fix issues without guessing what went wrong.
Password strength meter, progress indicator (X/7 fields valid), theme toggle (Light/Dark/System), draft auto-save, and success modal – all implemented in vanilla JavaScript.
Accessible: skip link ("Skip to form"), ARIA (aria-invalid, aria-describedby, aria-live), focus first invalid on submit, and reduced-motion support for inclusive UX.
Vanilla JS, responsive layout, no frameworks – minimal dependencies; works on desktop and mobile and is easy to integrate into any HTML project.

Credits & Acknowledgments

Form Validation Demo by RSK World. Real-time form validation with visual feedback, password strength, theme toggle, draft save, and accessible design for learning front-end and vanilla JS.

Form Validation Demo – real-time validation, password strength meter, theme toggle, draft auto-save, success modal, and accessible design. Free for learning and integration.
RSK World – Project creator and educational platform for front-end demos, form validation examples, and free source code.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Font Awesome – Icons; Bootstrap – CSS/JS framework; Prism.js – Syntax highlighting in file browser.
Razorpay – Payment integration; QR Server API – UPI QR code generation (api.qrserver.com / goqr.me).
© 2026 RSK World. All rights reserved. Form Validation Demo is provided under MIT License for educational and commercial use.

Support & Contact

For Form Validation Demo customization or integration help, please contact us.

Email: help@rskworld.in – for Form Validation Demo customization, integration into your project, or general front-end questions.
Phone: +91 93305 39277 – direct contact for support, custom form validation requirements, or bulk licensing inquiries.
Website: RSKWORLD.in – more free UI/UX projects, form validation examples, and programming resources by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India – RSK World base for development and support.
Author: Molla Samser (Founder, RSK World) – creator of Form Validation Demo and other educational front-end projects.
Form Validation Demo – README and documentation included in the download for features, file structure, and usage instructions.
Technical Support Available – get help with validation rules, theme integration, draft save, or accessibility improvements.
UI Component Requests Welcome – suggest new form fields, validation patterns, or UX features for future demos.