FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<!-- TODO: Build a signup form with built-in validation for name, email, and password. --> <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Signup Form Validation</title> </head> <body> <h1>Signup Form</h1> <p style='color:#666'>Add inputs for Name, Email, and Password. Use HTML5 validation attributes (required, type, minlength, pattern) so the form is invalid until inputs are correct. Do not add novalidate. You don’t need to send data anywhere; focus on validation behavior.</p> <!-- Your form goes here --> <script> (function () { const get = (sel) => document.querySelector(sel); // Runs after you add the form markup. const init = () => { const form = get('form'); const status = get('#status'); if (!form || !status) return; // still waiting for user markup form.addEventListener('submit', (e) => { // Keep user on the page; validation is the goal. e.preventDefault(); const valid = form.checkValidity(); if (!valid) { form.reportValidity(); status.textContent = 'Fix the highlighted fields.'; return; } status.textContent = 'Looks good ✅'; }); }; // Try now and after DOM updates. init(); window.addEventListener('DOMContentLoaded', init); })(); </script> </body> </html>
# CSS
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; line-height: 1.6; } form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 340px; } label { font-weight: 500; } input { padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; } button { padding: 0.5rem; background: #007acc; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #005fa3; } #status { font-weight: 600; margin-top: 0.25rem; }
Preview
Live preview updates as you type
Building preview…
Show preview