JSFiddle - React, Tailwind, and code Playground

by supercool

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<button data-bind="click: function(){login()}">Login</button>

JavaScript

var brechtbaekelandt = brechtbaekelandt || {};

brechtbaekelandt.login = (function ($, jQuery, ko, undefined) {
    "use strict";
    function LoginViewModel() {
        var self = this;
        self.userName = ko.observable().extend({ required: { message: 'Please enter your username' } });
        self.password = ko.observable().extend({ required: { message: 'Please enter your password' } });
        self.rememberMe = ko.observable();
        self.errorMessage=ko.observable();
        self.errors = ko.validation.group(self); //It will keep error message in array i.e based on count you must validate 
    };

    LoginViewModel.prototype.login = function () {
        var self = this;      
        self.errorMessage(null);
        alert('entering login');

     // self.isValid() doesnt exist you should base error length & do it
        if (self.errors().length>0) {
            alert('login invalid');         
            self.errors.showAllMessages();
            return;
        }
        else
        {
            alert('login valid');
            // do login
        }       
    };

    function init() {
        
        alert('entering init');

        var knockoutValidationSettings = {
            insertMessages: false,
            decorateElement: true,
            decorateElementOnModified: true,
            decorateInputElement: true,
            //errorMessageClass: 'error',
            //errorElementClass: 'error',
            //errorClass: 'error',
            errorsAsTitle: false,
            parseInputAttributes: false,
            messagesOnModified: true,
            messageTemplate: null,
            grouping: { deep: true, observable: true }
        };

        ko.validation.init(knockoutValidationSettings, true);

        var viewModel = new LoginViewModel();

        ko.applyBindingsWithValidation(viewModel);
    }

    return {
        LoginViewModel: LoginViewModel,
        init: init
    };

})($, jQuery, ko);

 $(document).ready(function(){
  ...