Certainly! Here is the implementation according to your requirements: --- ### HTML ```html ``` --- ### CSS ```css .error { color: red; display: none; font-size: 0.9em; margin-bottom: 8px; } ``` --- ### JavaScript ```javascript // Grab DOM elements const usernameInput = document.getElementById('username'); const emailInput = document.getElementById('email'); const usernameError = document.getElementById('error_username'); const emailError = document.getElementById('error_email'); const form = document.getElementById('myForm'); // Validation functions function validateUsername(value) { return value.length >= 4; } function validateEmail(value) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); } // Handlers for live validation usernameInput.addEventListener('input', () => { if (!validateUsername(usernameInput.value)) { usernameError.style.display = 'block'; } else { usernameError.style.display = 'none'; } }); emailInput.addEventListener('input', () => { if (!validateEmail(emailInput.value)) { emailError.style.display = 'block'; } else { emailError.style.display = 'none'; } }); // On form submit form.addEventListener('submit', (e) => { const isUsernameValid = validateUsername(usernameInput.value); const isEmailValid = validateEmail(emailInput.value); // Show errors if invalid usernameError.style.display = isUsernameValid ? 'none' : 'block'; emailError.style.display = isEmailValid ? 'none' : 'block'; // Prevent form submission if any field is invalid if (!isUsernameValid || !isEmailValid) { e.preventDefault(); } }); ``` --- **Usage**: Place the HTML in your file, link the CSS in your `

Live Username & Email Validation Form

openai/gpt-4.1

Traces

No span selected