JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<h3>Person 1</h3>
Name: <input type="text" data-bind="value: People()[0].Name" /><br/>
Last Name: <input type="text" data-bind="value: People()[0].LastName"/><br/>
Driver Id <input type="text" data-bind="value: People()[0].DriverId"/><br/>

<h3>Person 2</h3>
Name: <input type="text" data-bind="value: People()[1].Name" /><br/>
Last Name: <input type="text" data-bind="value: People()[1].LastName"/><br/>
Driver Id <input type="text" data-bind="value: People()[1].DriverId"/><br/>

CSS

.validationMessage
{
  color: red;
}

JavaScript

var viewModel;

var Unique = function(val, params)
{
  var isValid = true;
      ko.utils.arrayFirst(params[0](), function(item){
       if(val === item[params[2]]() && item !== params[1])
       {
           isValid = false;
           return true;
       }
      });
  return isValid;
};

var Person = function(person){
    var self = this;
    self.Name = ko.observable(person.Name);
    self.LastName = ko.observable(person.LastName);
    self.DriverId = ko.observable(person.DriverId).extend
     ({
       validation: { 
         validator: Unique, 
         message: 'DriverId is duplicate.', 
         params: [viewModel.People, self, 'DriverId']
       }
     });
    
    self.Errors = ko.validation.group(self);
    
    self.Errors.subscribe(function(){
     if(self.Errors().length > 0)
         self.Errors.showAllMessages();
    });
}

var MainViewModel = function ()
{
    var self = this;
    self.People = ko.observableArray();
}

$(function(){
    viewModel = new MainViewModel();
    
    var person1 = new Person({Name: 'John', LastName: 'Deer', DriverId: '001012345191'});
    viewModel.People.push(person1);

    var person2 = new Person({Name: 'John', LastName: 'Doe', DriverId: '001012345191'});
    viewModel.People.push(person2);

    ko.applyBindings(viewModel)
});