How to create live validation form in JavaScript
Published: (December 13, 2025 at 11:02 AM EST)
3 min read
Source: Dev.to
Source: Dev.to
Overview
Forms are everywhere — login, signup, checkout.
But have you ever filled a form and realized you had to submit it just to see errors?
Wouldn’t it be nice if the form validated itself as you type?
In this post we’ll build a live‑validation form using plain JavaScript and the tiny library Signel.js (no React, Vue, or heavy frameworks). The idea is:
- Every input updates a central state object as the user types.
- The state triggers validation logic automatically.
- Errors or messages are reflected in the DOM instantly.
HTML structure
<!DOCTYPE html>
<html>
<head>
<title>Live validation form</title>
</head>
<body>
<div class="warning-box">
<label>Username</label>
<input class="username" type="text" />
<label>Password</label>
<input class="password" type="password" />
</div>
<div class="message">
$$message
</div>
</body>
</html>JavaScript validation logic
// Create reactive state bound to the .warning-box element
let data = el('.warning-box', {
username: "", // updated from .username input
password: "", // updated from .password input
message: "" // warning message displayed in the DOM
});
// Bind inputs to the state
input('.username', data, 'username');
input('.password', data, 'password');
// Validate username
watch(data, 'username', value => {
if (value.length 0) {
data.message = "Username must be at least 3 characters";
} else {
data.message = "";
}
});
// Validate password
watch(data, 'password', value => {
if (value.length 0) {
data.message = "Password must be at least 7 characters";
} else {
data.message = "";
}
});Result
Full source code
<!DOCTYPE html>
<html>
<head>
<title>Live validation form</title>
</head>
<body>
<div class="warning-box">
<label>Username</label>
<input class="username" type="text" />
<label>Password</label>
<input class="password" type="password" />
</div>
<div class="message">
$$message
</div>
<script>
let data = el('.warning-box', {
username: '',
password: '',
message: '',
});
input('.username', data, 'username');
input('.password', data, 'password');
watch(data, 'username', value => {
if (value.length 0) {
data.message = "Username must be at least 3 characters";
} else {
data.message = '';
}
});
watch(data, 'password', value => {
if (value.length 0) {
data.message = "Password must be at least 7 characters";
} else {
data.message = '';
}
});
</script>
</body>
</html>Conclusion
In this post we built a live‑validation form with Signel.js, learning how to:
- Create a reactive state object bound to DOM elements.
- Bind inputs to that state automatically.
- Use watchers to run validation logic in real time.
The approach is lightweight, framework‑free, and perfect for small projects or for understanding how reactive libraries work under the hood.
Next steps
- Add more validation rules (e.g., email format, password strength).
- Combine reactive lists with form validation for a todo app.
- Explore how watchers and state can power other dynamic UIs.