HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<form id="registrationForm" novalidate>
    <label for="username">Username:</label>
    <input type="text" id="username" required>
    <button type="submit">Register</button>
    <span id="usernameError" style="color: red;"></span>
    <span id="registerSuccess" style="color: green; display: none;">Registration successful!</span>
</form>

if (!input.checkValidity()) {
        event.preventDefault(); // Prevent form from submitting
        usernameError.textContent = 'Username is required.';
        registerSuccess.style.display = 'none'; // Hide success message if visible
    } else {
        usernameError.textContent = ''; // Clear error message
        registerSuccess.textContent = 'Registration successful!';
        registerSuccess.style.display = 'block'; // Show success message
        input.value = ''; // Reset the username input
    }
});
</script>