JSFiddle - React, Tailwind, and code Playground

by Rene Rubio

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<input type="text" data-bind="value:phone" />
    <br />
    <input type="text" data-bind="value:text" />
    <br />
    <input type="text" data-bind="value:email" />
    <br />
    <input type="radio" data-bind="checked:agree" name="agree" value="1" />agree<br />
    <input type="radio" data-bind="checked:agree" name="agree" value="2" />disagree
<span data-bind="validationMessage: agree"></span>
    <br />
    <input type="checkbox" data-bind="checked:vehicle" value="bike" />bike<br />
    <input type="checkbox" data-bind="checked:vehicle" value="car" />car<br />
<span data-bind="validationMessage: vehicle"></span>
    <input type="button" data-bind="click:save" value="save" />

CSS

.validationMessage
        {
            color: Maroon;
        }

JavaScript

$(document).ready(function () {
            ko.validation.rules['trueOnly'] = {
                validator: function(val) {
                    return val;
                },
                message: "This checkbox is required"
            }
            ko.validation.registerExtenders();
            ko.validation.configure({
                decorateElement: true
            });
            var vm = ko.validatedObservable({
                phone: ko.observable().extend({
                    required: true,
                    pattern: {
                        params: /^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$/,
                        message: 'Invalid Phone Number.'
                    }
                }),
                email: ko.observable().extend({
                    required: true,
                    pattern: {
                        params: /^([\d\w-\.]+@([\d\w-]+\.)+[\w]{2,4})?$/,
                        message: 'Invalid Email Address.'
                    }
                }),
                text: ko.observable().extend({
                    required: true
                }),
                agree: ko.observable().extend({
                    required: true
                }),
                vehicle: ko.observable().extend({
                    trueOnly: true
                }),
                save: function () {
                    if (this.isValid()) {
                        alert('success');
                    }
                    else {
                        this.errors.showAllMessages();
                        alert('error');
                    }
                }
            });
            ko.applyBindings(vm);
        });