DEV Community

Cover image for How to create live validation form in JavaScript
Jahongir Sobirov
Jahongir Sobirov

Posted on

How to create live validation form in JavaScript

#webdev #javascript #programming #frontend

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, I’ll show you how to build a live validation form in plain JavaScript — no React, no Vue, no heavy frameworks. Just simple, reactive code you can understand and extend.

To make our form validate live, we need a system where:

  • Every input updates a central state object as the user types.
  • This state triggers validation logic automatically.
  • Any errors or messages are reflected in the DOM instantly.

Now we should prepare html part by making form.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live validation form</title>
    <!-- We need a only signel.js for making reactive form -->
    <script src="https://signel.onrender.com/signel.js"></script>
</head>
<body>
    <!-- Register form -->
    <form>
        <label for="username">Username</label><br>
        <input type="text" name="username" placeholder="Username" class="username"><br>
        <label for="password">Password</label><br>
        <input type="password" name="password" placeholder="Password" class="password"><br>
    </form>
    <!-- Warning messages appeares there -->
    <div class="warning-box">
        $$message
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now in <script> part we make live validation logic for our form:

// Create reactive state bound to DOM
let data = el('.warning-box', {
   username: "", // it changes when user entered something to .username input
   password: "", // it also changes
   message: "" // warning message will be saved there
});

// Bind inputs to state
input(".username", data, "username"); // input() function binds username property of data for getting value when user typed
input(".password", data, "password"); 

// Watch username changes
watch(data, "username", value => {
   // value.length > 0 assures that warning message displays only user started to typing 
   if(value.length < 3 && value.length > 0){
      data.message = "<span style='color:red'>Username must be at least 3 characters</span>";
   }else {
      data.message = "";
   }
});

// Watch password changes
watch(data, "password", value => {
   if (value.length < 6 && value.length > 0) {
      data.message = "<span style='color:red'>Password must be at least 7 characters</span>";
   } else {
      data.message = "";
   }
});
Enter fullscreen mode Exit fullscreen mode

And the result:

Result

The whole codes of form.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live validation form</title>
    <script src="https://signel.onrender.com/signel.js"></script>
</head>
<body>
    <form>
        <label for="username">Username</label><br>
        <input type="text" name="username" placeholder="Username" class="username"><br>
        <label for="password">Password</label><br>
        <input type="password" name="password" placeholder="Password" class="password"><br>
    </form>
    <div class="warning-box">
        $$message
        <!-- $$username and $$password -->
    </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 < 3 && value.length > 0) {
                data.message = "<span style='color:red'>Username must be at least 3 characters</span>";
            } else {
                data.message = "";
            }
        });

        watch(data, "password", value => {
            if (value.length < 6 && value.length > 0) {
                data.message = "<span style='color:red'>Password must be at least 7 characters</span>";
            } else {
                data.message = "";
            }
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this post, we built a live validation form in JavaScript using Signel.js.

You learned how to:

  • Create a reactive state object bound to DOM elements
  • Bind inputs to state automatically
  • Use watchers to run validation logic in real-time
  • Update the UI without any framework or virtual DOM

This approach is lightweight, easy to understand, and perfect for small projects or learning how reactive frameworks work under the hood.

No complex build tools, no heavy libraries — just plain JavaScript.

Now it’s your turn:

  • Try adding more validation rules (email, password strength, etc.)
  • Combine reactive lists with form validation for a todo app
  • Explore how watchers and state can power dynamic UIs

What would you build next with Signel.js? Share your ideas in the comments! 🙌

Top comments (0)