JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
<form data-bind="submit: submitForm">
  <div class="input-fields" data-bind="foreach: dogs">
    <label for="DogName">Dog Name</label>
    <input type="text" id="DogName" name="DogName" data-bind="value: Name" />

    <br/>

    <label for="DogBreed">Dog Breed</label>
    <input type="text" id="DogBreed" name="DogBreed" data-bind="value: Breed" />
    <p data-bind="validationMessage: Breed"></p>
  </div>

  <button type="submit">Submit</button>

</form>

JavaScript

$(function() {

  function KnockoutViewModel() {
    var self = this;
    self.dogs = ko.observableArray([new Dog()]);
    self.submitForm = function() {
      console.log(self.dogs()[0].Breed());
    };
    
    self.validationObject = ko.validatedObservable({
        dogs: self.dogs
    });
  }

  function Dog() {
    var self = this;
    self.Name = ko.observable();
    self.Breed = ko.observable().extend({
      required: {
        params: true,
        message: "The dog's breed field is required."
      }
    });
    
    self.validationObject = ko.validatedObservable({
        Breed: self.Breed.extend({
            required: true
        })
    });
  }

  window.vm = new KnockoutViewModel();
  ko.applyBindings(vm);
})