JSFiddle - React, Tailwind, and code Playground

by SAFX

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
Name<br>
<input data-bind='value: name'/>
<p>
Port<br>
<input data-bind='value: port'/>
 <p>
Errors<br>
<span data-bind='text: errors'> </span>
<p>
Validate!<br>
<button data-bind="click: validateFields">Validate</button>

JavaScript

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

    ko.validation.configure({
      registerExtenders: true,
      messagesOnModified: true,
      insertMessages: false,
      parseInputAttributes: true,
      messageTemplate: null
    });

    ko.numericObservable = function(initialValue) {
      var _actual = ko.observable(initialValue);
  
      var result = ko.dependentObservable({
          read: function() {
              return _actual();
          },
          write: function(newValue) {
              var parsedValue = parseFloat(newValue);
              _actual(isNaN(parsedValue) ? newValue : parsedValue);
          }
      });
      return result;
    };

    function ViewModel() {
      var self = this;    
        
      self.errors = ko.observable("");      
      self.name = ko.observable("").extend({ required: true });
      self.port = ko.numericObservable(22).extend({ number: true });
      
      self.validationModel = ko.validatedObservable({
        v1: self.name,
        v2: self.port
      });
      
      self.validateFields = function(){
        var valid = self.validationModel.isValid();
        if(!valid)
          self.errors(self.validationModel.errors());          
        else
          self.errors("No errors");     
      };
    };

    ko.applyBindings(new ViewModel());