JSFiddle - React, Tailwind, and code Playground

by thakkar

HTML

<script src="https://rawgithub.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-amd-helpers/master/ext/require/require.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

define('ViewModel', [], 
       function() {
           function ViewModel() {
                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);
                    }
                };
            
            };
           return ViewModel;
       }
);

require(['ViewModel'], function(ViewModel){
    ko.applyBindings(new ViewModel());
});