Vue.js (Vuelidate)

A fully interactive Vue component with form validation.

Success! Form submitted successfully! The secret is: dumbledore

Personal Information

First name is required
Last name is required
Please enter a valid email address
Please enter a valid phone number (e.g. 123-456-7890)
Age must be between 18 and 120

Address

Street address is required
City is required
State is required
Please enter a valid zip code
Country is required

Account Information

Username must be at least 4 characters
Password must be at least 8 characters
Passwords must match

Preferences

Additional Fields

Only letters and numbers are allowed
Please enter a valid URL
Not Satisfied {{ formData.satisfactionLevel }}% Very Satisfied
You must agree to the terms and conditions

Red Herring Modal

This is a red herring modal instead of submitting the form.

In a real application, this might contain additional options or information.