knockout validation demo

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="knockout@*" data-semver="3.3.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1><a href="https://github.com/Knockout-Contrib/Knockout-Validation" target="_blank">Knockout Validation</a> Demo</h1>
    <input type="text" data-bind="textInput: ssn" >
    <hr/>
    Valid: <span data-bind="text: ssn.isValid"></span>
  </body>

</html>

// Code goes here



function ViewModel(){
  var self = this;
  
  self.ssn = ko.observable('').extend({
    required: true,
    minLength: 9,
    maxLength: 11,
    pattern: {
        message: 'Enter a valid SSN',
        params: /^[0-9]{3}[-]?[0-9]{2}[-]?[0-9]{4}$/g
    }
  });
  
  
}

$(function(){
  var vm = new ViewModel();
  ko.applyBindings(vm);
});

/* Styles go here */