Implementing Form Validation with Knockout.js

Implementing form validation with Knockout.js involves several steps. Here's a detailed guide to help you get started:

Step 1: Setup Your Project

First, ensure you have Knockout.js included in your project. You can do this by adding the Knockout.js library to your HTML file.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form Validation demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
        integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js"
        integrity="sha512-b99MDNv5TqiZtPKH2UeHzDAVydmgrOJEPtaPPEF8AgV86eYyqINFI/K7/7f0+R4WNTAVv8KvvpjwfOYHv5rd5g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <div class="container">
        <!-- Your form will go here -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Step 2: Create Your ViewModel

Create a ViewModel that will handle the form data and validation logic. You can define your observables and validation rules in this ViewModel.

function AppViewModel() {
    var self = this;
    
    self.firstName = ko.observable('').extend({
        required: {
            message: "First name is required."
        }
    });
    
    self.lastName = ko.observable('').extend({
        required: {
            message: "Last name is required."
        }
    });

    self.email = ko.observable('').extend({
        required: {
            message: "Email is required."
        },
        email: {
            message: "Please enter a valid email address."
        }
    });

    self.password = ko.observable('').extend({
        required: {
            message: "Password is required."
        },
        minLength: {
            message: "Password must be at least 6 characters long.",
            params: 6
        }
    });

    self.confirmPassword = ko.observable('').extend({
        required: {
            message: "Confirm Password is required."
        },
        equal: {
            message: "Passwords do not match.",
            params: self.password
        }
    });

    self.errors = ko.validation.group(self);

    self.submitForm = function() {
        if (self.errors().length === 0) {
            alert('Form is valid!');
            // Proceed with form submission logic
        } else {
            self.errors.showAllMessages();
        }
    };
}

ko.applyBindings(new AppViewModel());

Step 3: Setup Knockout Validation

You'll need to include the Knockout Validation library to use the validation rules. Add the following script to your HTML:

// Initialize Knockout validation
ko.validation.init({
    registerExtenders: true, // Register custom validation rules
    messagesOnModified: true, // Show validation messages as soon as a field is modified
    insertMessages: true, // Insert validation messages next to the input elements
    parseInputAttributes: true, // Parse HTML5 input attributes for validation rules
    errorClass: 'text-danger fw-semibold', // CSS class for validation error messages
    messageTemplate: null // Use default message template
}, true);

Step 4: Create Your HTML Form

Now, create your HTML form and bind the input fields to your ViewModel properties using the data-bind attribute.

<body>
    <form data-bind="submit: submitForm">
        <div>
            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" data-bind="value: firstName">
            <span data-bind="validationMessage: firstName"></span>
        </div>
        <div>
            <label for="lastName">Last Name:</label>
            <input type="text" id="lastName" data-bind="value: lastName">
            <span data-bind="validationMessage: lastName"></span>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" data-bind="value: email">
            <span data-bind="validationMessage: email"></span>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" data-bind="value: password">
            <span data-bind="validationMessage: password"></span>
        </div>
        <div>
            <label for="confirmPassword">Confirm Password:</label>
            <input type="password" id="confirmPassword" data-bind="value: confirmPassword">
            <span data-bind="validationMessage: confirmPassword"></span>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>

Step 5: Apply Knockout Bindings

Finally, ensure your ViewModel is bound to your HTML form. This should be done in your JavaScript file as shown in the ViewModel creation step above.

// Apply bindings
ko.applyBindings(new AppViewModel());

Combine the whole code

Here's a full example combining everything:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form Validation demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
        integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js"
        integrity="sha512-b99MDNv5TqiZtPKH2UeHzDAVydmgrOJEPtaPPEF8AgV86eYyqINFI/K7/7f0+R4WNTAVv8KvvpjwfOYHv5rd5g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style type="">
        *, :root{
            font-size: medium;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="mt-4">
            <h5 class="fw-bold">Form Validation</h5>
            <hr />
        </div>
        <form class="row g-3" data-bind="submit: submitForm">
            <div class="col-12 col-md-6">
                <label class="fw-bold form-label" for="firstName">
                    First Name
                    <span class="fw-bold text-danger ms-1" data-bind="visible: isRequired('firstName')">*</span>
                </label>
                <input type="text" id="firstName" data-bind="value: firstName" class="form-control">
                <!-- <span data-bind="validationMessage: firstName"></span> -->
            </div>
            <div class="col-12 col-md-6">
                <label class="fw-bold form-label" for="lastName">
                    Last Name<span class="fw-bold text-danger ms-1"
                        data-bind="visible: isRequired('lastName')">*</span></label>
                <input type="text" id="lastName" data-bind="value: lastName" class="form-control">
                <!-- <span data-bind="validationMessage: lastName"></span> -->
            </div>
            <div class="col-12">
                <label class="fw-bold form-label" for="email">
                    Email
                    <span class="fw-bold text-danger ms-1" data-bind="visible: isRequired('email')">*</span>
                </label>
                <input type="email" id="email" data-bind="value: email" class="form-control">
                <!-- <span data-bind="validationMessage: email"></span> -->
            </div>
            <div class="col-12 col-md-6">
                <label class="fw-bold form-label" for="password">
                    Password
                    <span class="fw-bold text-danger ms-1" data-bind="visible: isRequired('password')">*</span>
                </label>
                <input type="password" id="password" data-bind="value: password" class="form-control">
                <!-- <span data-bind="validationMessage: password"></span> -->
            </div>
            <div class="col-12 col-md-6">
                <label class="fw-bold form-label" for="confirmPassword">
                    Confirm Password
                    <span class="fw-bold text-danger ms-1" data-bind="visible: isRequired('confirmPassword')">*</span>
                </label>
                <input type="password" id="confirmPassword" data-bind="value: confirmPassword" class="form-control">
                <!-- <span data-bind="validationMessage: confirmPassword"></span> -->
            </div>
            <div>
                <button class="btn btn-primary" type="submit">Submit</button>
            </div>
        </form>
    </div>
    <script type="text/javascript">

        // Initialize Knockout validation
        ko.validation.init({
            registerExtenders: true, // Register custom validation rules
            messagesOnModified: true, // Show validation messages as soon as a field is modified
            insertMessages: true, // Insert validation messages next to the input elements
            parseInputAttributes: true, // Parse HTML5 input attributes for validation rules
            errorClass: 'text-danger fw-semibold', // CSS class for validation error messages
            messageTemplate: null // Use default message template
        }, true);

        function AppViewModel() {
            var self = this;

            self.firstName = ko.observable('').extend({
                required: {
                    message: "First name is required."
                }
            });

            self.lastName = ko.observable('');

            self.email = ko.observable('').extend({
                required: {
                    message: "Email is required."
                },
                email: {
                    message: "Please enter a valid email address."
                }
            });

            self.password = ko.observable('').extend({
                required: {
                    message: "Password is required."
                },
                minLength: {
                    message: "Password must be at least 6 characters long.",
                    params: 6
                }
            });

            self.confirmPassword = ko.observable('').extend({
                required: {
                    message: "Confirm Password is required."
                },
                equal: {
                    message: "Passwords do not match.",
                    params: self.password
                }
            });

            self.errors = ko.validation.group(self);

            //Using knockout
            self.isRequired = function (observable) {
                if (ko.isObservable(self[observable])) {
                    let rules = self[observable].rules();
                    return rules.some(function (rule) {
                        return rule.rule === 'required';
                    });
                }
                return false;
            };

            //using javascript
            // self.isRequired = function(observable) {
            //     if (self.hasOwnProperty(observable)) {
            //         let rules = self[observable].rules();
            //         return rules.some(function(rule) {
            //             return rule.rule === 'required';
            //         });
            //     }
            // };

            self.submitForm = function () {
                if (self.errors().length === 0) {
                    alert('Form is valid!');
                    // Proceed with form submission logic
                    self.errors.showAllMessages(false);
                } else {
                    self.errors.showAllMessages();
                }
            };
        }

        ko.applyBindings(new AppViewModel());
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

Output -