JSFiddle - React, Tailwind, and code Playground

by manzanotti

HTML

<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"></script>
<form>
    <div>
        <input required="required" id="textbox1" type="text" />
    </div>
    <div>
        <input id="checkbox1" type="checkbox" data-bind="checked:                                                 viewitems">Checkbox</input>
    </div>
    <div data-bind="visible: viewitems">
        <ul data-bind="foreach: $root.items">
            <li> <span data-bind="text: itemname"></span>

            </li>
        </ul>
    </div>
</form>

CSS

input.error
        {
            border: 1px solid red;
        }

JavaScript

var myViewModel = {
    items: ko.observableArray([{
        itemname: 'Item1'
    }, {
        itemname: 'Item2'
    }]),
    viewitems: ko.computed(function() {
    return $('#textbox').valid();
})
};

$(document).ready(function () {
    //Bind View model
    ko.applyBindings(myViewModel);
    $("form1").validate();
    //Checkbox cause validation method
    $('#checkbox1').click(function () {
        if (!$('#textbox1').valid()) {
            alert("Please enter value");
            return;
        }
    });
});