Form with Inline Validation Template

Improve user experience and reduce errors with live, inline form validation.

This template provides instant feedback as the user fills out the form, displaying a success state for valid input or a helpful error message for invalid input, preventing frustration on submission.

Screenshot of a form where some fields have green checkmarks for success and one has a red error message.

Get Source Code → Preview →

About this Inline Validation Form

Waiting until a user hits "Submit" to tell them they made a mistake is a poor experience. Inline validation solves this by checking the data in a field as soon as the user has finished interacting with it (e.g., when they 'blur' or click away from the input). This template provides a complete front-end system for this pattern.

The JavaScript listens for the blur event on each input. When triggered, it checks the input's validity against its requirements (e.g., is it a valid email? is it long enough?). Based on the result:

If valid, it adds a success class to the form group, which styles the border green and shows a checkmark icon.
If invalid, it adds an error class, which styles the border red, shows an x icon, and displays an explanatory error message underneath.

This immediate feedback helps users correct mistakes as they happen, leading to higher form completion rates.

Features

Real-Time Feedback: Validates fields on-the-fly, guiding the user through the form.
Clear Success and Error States: Uses color, icons, and text messages to clearly communicate the status of each field.
Client-Side Logic: The validation is handled in the browser with JavaScript, preventing unnecessary server requests.
Extensible: The validation logic in the JavaScript can be easily expanded with more complex rules.

Dependencies

Uses pure HTML and CSS, with a necessary, self-contained JavaScript block for the validation logic.

Code

Here's the full code for the inline validation form template:

/* -- The core styles -- */
.form-group {
    margin-bottom: 20px;
    position: relative; /* Needed for positioning icons */
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
/* Style for error/success icon */
.form-group .status-icon {
    position: absolute;
    right: 10px;
    top: 38px;
    visibility: hidden;
}
.form-group .status-icon svg { width: 20px; height: 20px; }
/* Style for the helper text */
.form-group small {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    visibility: hidden; /* Hide by default */
}
/* -- Validation State Styles -- */
/* Success State */
.form-group.success input { border-color: #28a745; }
.form-group.success .status-icon.success-icon { visibility: visible; color: #28a745; }
/* Error State */
.form-group.error input { border-color: #dc3545; }
.form-group.error small { visibility: visible; color: #dc3545; }
.form-group.error .status-icon.error-icon { visibility: visible; color: #dc3545; }

/* -- Submit Button -- */
.submit-btn {
    width: 100%;
    padding: 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
}
</style>

<div class="validation-form-container">
    <h2>Create Account</h2>
    <form id="validationForm" action="#" method="post">
        <div class="form-group" id="group-username">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="Min. 3 characters">
            <span class="status-icon success-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></span>
            <span class="status-icon error-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></span>
            <small>Error message</small>
        </div>
        
        <div class="form-group" id="group-email">
            <label for="email">Email</label>
            <input type="text" id="email" name="email" placeholder="A valid email address">
            <span class="status-icon success-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></span>
            <span class="status-icon error-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></span>
            <small>Error message</small>
        </div>

<div class="form-group" id="group-password">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="Min. 8 characters">
            <span class="status-icon success-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></span>
            <span class="status-icon error-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></span>
            <small>Error message</small>
        </div>

<button type="submit" class="submit-btn">Submit</button>
    </form>
</div>

// Utility functions to set error and success states
const setError = (input, message) => {
    const formGroup = input.parentElement;
    const small = formGroup.querySelector('small');
    small.innerText = message;
    formGroup.className = 'form-group error';
};
const setSuccess = (input) => {
    const formGroup = input.parentElement;
    formGroup.className = 'form-group success';
};

// Validation functions
const isEmail = (email) => {
    // Basic regex for email validation
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
};

// Check inputs on blur
const checkUsername = () => {
    const usernameValue = username.value.trim();
    if (usernameValue.length < 3) {
        setError(username, 'Username must be at least 3 characters.');
    } else {
        setSuccess(username);
    }
};
const checkEmail = () => {
    const emailValue = email.value.trim();
    if (!isEmail(emailValue)) {
        setError(email, 'Email is not valid.');
    } else {
        setSuccess(email);
    }
};
const checkPassword = () => {
    const passwordValue = password.value.trim();
    if (passwordValue.length < 8) {
        setError(password, 'Password must be at least 8 characters.');
    } else {
        setSuccess(password);
    }
};

if (form) {
    // Add blur event listeners to each input
    username.addEventListener('blur', checkUsername);
    email.addEventListener('blur', checkEmail);
    password.addEventListener('blur', checkPassword);
    
    // Final check on form submit
    form.addEventListener('submit', (e) => {
        e.preventDefault(); // Always prevent the default submission first.

// Run all checks
        checkUsername();
        checkEmail();
        checkPassword();

// Check if all fields are valid before allowing submission
        const isFormValid = document.querySelectorAll('.form-group.success').length === 3;
        if(isFormValid) {
            alert('Form is valid and would submit!'); 
            // In a real application, you would remove the alert and uncomment the line below.            
            // form.submit(); // Uncomment this line to allow actual submission
        } else {
             alert('Please fix the errors before submitting.');
        }
    });
}
</script>

View Output