JSFiddle - React, Tailwind, and code Playground

by James

HTML

<script src="https://rawgit.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title text-center" id="signUpModalLabel">Sign up</h4>
        </div>
        <div class="modal-body signup-form">
            <script id="customMessageTemplate" type="text/html">
                <span class="customMessage" data-bind='validationMessage: field'></span>
            </script>
            <fieldset>
                <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
                <div class="form-group">
                    <label>
                        First name:
                        <input data-bind='value: firstName' class="form-control" />
                    </label>
                </div>
                <div class="form-group">
                    <label>
                        Last name:
                        <input data-bind='value: lastName' class="form-control" />
                    </label>
                </div>

                <div class="form-group" data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
                    <label>
                        Email:
                        <input data-bind='value: emailAddress' class="form-control" required pattern="/^([\d\w-\.]+&#64;([\d\w-]+\.)+[\w]{2,4})?$/" />
                    </label>
                </div>
                <div class="form-group">
                    <label>
                        Password:
                        <input data-bind='value: password' type="password" class="form-control" />
                    </label>
                </div>
                <div class="form-group">
                    <label>
                        Retype password:
                        <input...

JavaScript

var app = (function (app) {
    "use strict";

    app.SignUpForm = function () {

        //http://jsfiddle.net/KHFn8/2971/
        //Signup Form Validation
        ko.validation.rules.pattern.message = 'Invalid.';

        ko.validation.configure({
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: true,
            parseInputAttributes: true,
            messageTemplate: null,
            decorateInputElement: true,
            decorateElementOnModified: true,
            errorMessageClass: 'errorFoo',
            errorElementClass: 'errorFoo',
            errorClass: 'errorFoo'
        });


        var captcha = function (val) {
            return val == 11;
        };

        var mustEqual = function (val, other) {
            return val == other();
        };

        self.firstName = ko.observable().extend({
            minLength: 2,
            maxLength: 10
        });

        self.lastName = ko.observable().extend({
            required: true
        });

        self.emailAddress = ko.observable().extend({
            validatable: true,
            // custom message
            required: {
                message: 'Please supply your email address.'
            },
            pattern: {
                message: "Please enter a valid email address",
                params: /^([\d\w-\.]+@([\d\w-]+\.)+[\w]{2,4})?$/
            }
        });

        self.password = ko.observable();

        self.captcha = ko.observable().extend({
            validation: {
                validator: captcha,
                message: 'Please check.'
            }
        });

        self.submit = function () {
            if (self.errors().length == 0) {
                alert('Thank you.');
            } else {
                alert('Please check your submission.');
                self.errors.showAllMessages();
            }
        }

        self.confirmPassword = ko.observable().extend({
            validation: {
 ...