title: date comparison display validation message
body: <p>I have some date comparison code that I am trying to adjust to my own project. I don't know much about javascript so I am trying to make sense of it. Basically the functions are set up but I also want them to display a message saying 'that date is invalid'. I started on the function not sure if it makes sense I copied it from some other javascipt The code is inline for now but I will separate everything later on. The CSS is from the original example. This was not showing though when I tested it but I could see in the console the javascript was working. Here is my code:</p>
  
  <p>NOTE: I would like javascript not jquery solutions please, just for my assignment it is required that we use javascript only. </p>
  
  <pre><code>&lt;style&gt;
  
      input.okay{
          color: green;
      }
  
      input.invalid{
          color: yellow;
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;h1&gt;Date comparrison&lt;/h1&gt;
  
  &lt;form action=""&gt;
  
      &lt;div class="row"&gt;
          &lt;label for="arrival"&gt;Arrival&lt;/label&gt;
          &lt;input type="date" id="arrival"&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;label for="checkout"&gt;Checkout&lt;/label&gt;
          &lt;input type="date" id="checkout"&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;input type="submit" id="submit"&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;script&gt;
          var submit_button = document.querySelector('#submit');
          var arrival = document.querySelector('#arrival');
          var checkout = document.querySelector('#checkout');
  
          checkout.onblur = checkDates;
  
          function checkDates() {
              var valid = true;
  
              if(isValidDate(arrival.value) &amp;&amp; isValidDate(checkout.value)) {
                  valid = false;
                  var arrival_date = new Date(arrival.value).valueOf();
                  var checkout_date = new Date(checkout.value).valueOf();
                      if(arrival_date &gt; checkout_date) {
                          valid = false;
                      }
                  } else {
                      valid = false;
                      displayError('arrival', 'That date is invalid');
                  } else {
                      hideError('arrival');
                      return valid;
              }
          }
  
  
          function isValidDate(str) {
              var datePattern = /^\d{2,4}\-\d{1,2}\-\d{1,2}$/;
              return datePattern.test(str);
          }
  
          submit_button.onclick = function() {
              console.log(checkDates());
              return false;
          }
  &lt;/script&gt;
  </code></pre>