JSFiddle - React, Tailwind, and code Playground

by thakkar

HTML

<script src="https://rawgithub.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
Gender:
<select data-bind="value: memberType,
                    options: memberTypeSource,
                    optionsText: 'text',
                    optionsValue: 'id',
                    optionsCaption: 'Please select'"></select>
<br />
<button type="button" data-bind='click: doValidation'>Submit</button>

JavaScript

var viewModel = function () {
    var self = this;

    self.memberType = ko.observable().extend({
        validation: {
            validator: function(val) { return (typeof val != "undefined"); },
            message: 'Please select gender'
        }
    });

    self.memberTypeSource = [{
        id: 1,
        text: 'Man'
    }, {
        id: 2,
        text: 'Woman'
    }];
    self.errors = ko.validation.group(self);
    self.doValidation = function () {
        console.log('error count=' + self.errors().length);
        if (self.errors().length == 0) {
            console.log('Yay.');
        } else {
            self.errors.showAllMessages(true);
        }
    };

};


ko.applyBindings(new viewModel);