JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="https://rawgithub.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>

<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>Feedback 1: <input data-bind='value: feedback1' required/></label>
    <label>Feedback 2: <input data-bind='value: feedback2' required/></label>    
    
    <label>
        Subscriptions: 
        <select data-bind='value: feedback3, options: feedback3Options, optionsCaption: "Choose one..."' required></select>
    </label>
   <label>Feedback 4: <input data-bind='value: feedback4' required/></label>   
    <label>Feedback 5: <input data-bind='value: feedback5' required/></label>   
    <label>Feedback 6: <input data-bind='value: feedback6' required/></label>   
        <label>Feedback 7: <input data-bind='value: feedback7' required/></label>   
</fieldset>
<button type="button" data-bind='click: submit'>Submit</button>
        
        <button type="button" data-bind='click: submit, enable:isComplete'>Submit (disabled if not complete)</button>
        
        <button type="button" data-bind='click: submit, enable:errors().length===0'>Submit (disabled if not complete)</button>
        
<br />
<br />

       Display inline error messages? <input type="checkbox" data-bind='click: toggleInlineErrors,checked:showInlineErrors'/>

CSS

label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

ko.validation.rules.pattern.message = 'Invalid.';
    

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,  //this is 'true' to read the 'required' attribute in your html
    messageTemplate: null
});


var viewModel = {
    feedback1: ko.observable(),  //required attribute is set in the HTML
    feedback2: ko.observable(),  //required attribute is set in the HTML
    feedback3: ko.observable(),  //required attribute is set in the HTML
    feedback4: ko.observable(),  //required attribute is set in the HTML
    feedback5: ko.observable(),  //required attribute is set in the HTML
    feedback6: ko.observable(),  //required attribute is set in the HTML
    feedback7: ko.observable().extend({ required: true }), //or add the required attribute when you create the observable
    feedback3Options: ['Technology', 'Music'],
   
    submit: function () {
        if (viewModel.errors().length == 0) {
            alert('Thank you.');
        } else {
            
            viewModel.errors.showAllMessages(this.showInlineErrors());
            alert('Please check your submission.');
        }
    }
};

viewModel.showInlineErrors = ko.observable(true);
viewModel.errors = ko.validation.group(viewModel);

viewModel.isComplete = ko.computed(function(){
    return viewModel.errors().length === 0
});

viewModel.toggleInlineErrors = function () {  
    viewModel.errors.showAllMessages(false);
    return true;
};

addEventListener('load', function () {
ko.applyBindings(viewModel);
});