JSFiddle - React, Tailwind, and code Playground

by Halit Yurttas

HTML

<script src="http://knockoutjs.com/downloads/knockout-1.3.0beta.js"></script>
<script src="https://rawgithub.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<form data-bind="submit: closeComplaint" method="post"> 
    <select data-bind="options: rootCauses, 
                            optionsText: 'RootCauseText',
                            optionsValue: 'RootCauseText',  
                            value: selectedRootCause, 
                            optionsCaption: 'Choose..',
                            validationOptions: {    errorElementClass: 'input-validation-error' }">
    </select>
    <input data-bind="value:selectedRootCause, validationOptions: { errorElementClass: 'input-validation-error-pink' }"/>

    <input type="button" value="Close Complaint" data-bind="click: validate"/>
</form>

CSS

label { display: block; }
.validationMessage { color: Red; }
.input-validation-error { color: Orange; }
.input-validation-error-pink { color: Pink; }

JavaScript

function viewModel ()  {
    var self = this;
    this.rootCauses = ko.observableArray([ { "RootCauseText" : "T1"} ,
                                           { "RootCauseText" : "T2"} ,
                                           { "RootCauseText" : "T3"} ,
                                           { "RootCauseText" : "T4"}])
    self.selectedRootCause = ko.observable().extend({
        required: true
    });

    self.closeComplaint = function() {
        if (self.errors().length == 0) {
           
        }
    }
        
    self.errors = ko.validation.group(self);
    
    self.validate = function() {
        self.errors.showAllMessages();
    }
};

 ko.validation.configure({ 
    decorateElement : true
});

ko.applyBindings(new viewModel());