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();
        self.password = ko.observable();
        self.rememberMe = ko.observable();
        self.errorMessage = ko.observable();

        self.validate = ko.validatedObservable([
            self.userName.extend({
                required: {
                    message: 'Please enter your username'
                }
            }),
            self.password.extend({
                required: {
                    message: 'Please enter your password'
                }
            })
        ]);
    };

    LoginViewModel.prototype.login = function () {
        var self = this;

        self.errorMessage(null);

        alert('entering login');

        // self.isValid() is not a function
        if (!self.validate.isValid()) {
            alert('login invalid');
            self.validate.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 {
       ...