title: Knockout Validation automatically displaying error message before user has entered any data
body: <p>I'm trying to implement Knockout Validation and Knockout Mapping.  I have an ASP.Net MVC WebAPI that sends JSON data to my client where I'm mapping JSON to observables in my model:</p>
  
  <p><strong>ViewModel:</strong></p>
  
  <pre><code>ko.validation.rules.pattern.message = 'Invalid.';
  
  ko.validation.configure({
      registerExtenders: true,
      messagesOnModified: true,
      insertMessages: true,
      parseInputAttributes: true,
      messageTemplate: null,
      decorateElement: true,
      errorClass: 'error'
  });
  var MakePaymentViewModel = function ()
  {
      var mapDataFromJson = function (jsonFromServer)
      {
          var model = ko.mapping.fromJS(jsonFromServer);
          self.PaymentAmount(model.PaymentAmount());
          self.MakePaymentTo(model.MakePaymentTo());
          self.MakePaymentOn(model.MakePaymentOn());
      };
  
      var self = this;
  
      /* MAKE PAYMENT MODEL*/
      self.PaymentAmount = ko.observable().extend({ required: { message: 'required'}});
      self.MakePaymentTo = ko.observable().extend({ required: { message: 'required'}});   
      self.MakePaymentOn = ko.observable().extend({ required: { message: 'required' }});  
      self.Errors = ko.validation.group(self);
  
      self.MapDataFromServer = function (jsonFromServer)
      {
          mapDataFromJson(jsonFromServer);
      };
  
      self.DoPaymentConfirmation = function ()
      {
          console.log('error count: ' + self.Errors().length);
      };
  };
  </code></pre>
  
  <p><strong>Here's My View:</strong></p>
  
  <pre><code>&lt;form id="MakePaymentForm" autocomplete="off"&gt;
  &lt;div class="input-wrapper"&gt;
      &lt;label for="SendingAmount" class="text-left"&gt;I am sending &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
      &lt;input id="PaymentAmount" type="text" data-bind="value: PaymentAmount"/&gt;
  &lt;/div&gt;
  
  &lt;div class="input-wrapper"&gt;
      &lt;label for="MakePaymentTo" class="text-left"&gt;to &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
      &lt;input id="MakePaymentTo" type="text" data-bind="value: MakePaymentTo"/&gt;
  &lt;/div&gt;
  
  &lt;div class="input-wrapper"&gt;
      &lt;label for="MakePaymentOn" class="text-left"&gt;on &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
      &lt;input name="MakePaymentOn" id="MakePaymentOn" type="text" data-bind="value: MakePaymentOn"/&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="small radius" data-bind="click: DoPaymentConfirmation"&gt;Send&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I think what's happening is the first time I get data from the server, the JSON's data is null:</p>
  
  <pre><code>{"PaymentAmount":null,"MakePaymentTo":null,"MakePaymentOn":null}
  </code></pre>
  
  <p>So, the mapDataFromJson function is populating the observables with null data and triggering the validation rules and consequently the UI shows the error messages immediately before the user can enter any data.</p>
  
  <p>Any ideas on how to fix this?  I'm new to Knockout, so I may not be doing this correctly.  Thanks for your time.</p>