JSFiddle - React, Tailwind, and code Playground

by Rohan Buchner

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  
<form>
<div class="control-group" data-bind="validationElement: userInfo.IdOrPassportNumber">
                    <label class="control-label ">
                        <label class="radio pull-left" style="padding-right: 10px;">
                            <input type="radio" name="IdTypes" id="Id" value="Id" data-bind="checked: userInfo.IdType">Id
                        </label>
                        <label class="radio pull-left">
                            <input type="radio" name="IdTypes" id="Passport" value="Passport" data-bind="checked: userInfo.IdType">Passport
                        </label>
                        <div class="clearfix"></div>
                    </label>
                    <div class="controls">
                        <input type="text" data-bind="value: userInfo.IdOrPassportNumber, valueUpdate:'afterkeydown'" />
                    </div>
                </div>
    </form>

JavaScript

var self = this;

   self.userInfo = {       
        IdOrPassportNumber: ko.observable().extend({
            required: true
        }),
        IdType: ko.observable()
    },

    self.isIdValid = ko.validatedObservable({ 
         IdOrPassportNumber: self.userInfo.IdOrPassportNumber 
    });

    self.userInfo.IdOrPassportNumber.subscribe(function (value) {
          if (isIdValid.isValid()) {
               console.log('YOLO!');
          }
    });

    self.userInfo.IdType.subscribe(function (value) {
        console.log(value);
        if (value === 'Passport') {
            self.userInfo.IdOrPassportNumber.extend({ maxLength: 15, minlength: 15 });
        } else {
            self.userInfo.IdOrPassportNumber.extend({ maxLength: 13, minlength: 13 });
        }
    });    

    var viewModel = {
        userInfo: self.userInfo
    };

    viewModel["errors"] = ko.validation.group(viewModel.userInfo);
    viewModel["errors"].showAllMessages();

 ko.validation.init({ errorElementClass: 'error', errorMessageClass: 'error help-inline' });
    ko.validation.configure({     
        decorateElement: true,
        errorsAsTitleOnModified: true,
        errorMessageClass: 'help-inline',
        errorClass: 'error'
    });

   ko.applyBindings(viewModel);