title: Javascript number validation function acting up + constructive criticism wanted
body: <p>So the goal was to make a very simple two field form and use javascript to validate that only numeric values are entered in either field.</p>
  
  <p>Two issues with my code: only the else condition of the functions that follow seems to execute. Even more confusingly it also executes just clicking in the other field when the fields are empty. </p>
  
  <p>Help please?</p>
  
  <p>The Javascript:</p>
  
  <pre><code>// 1. Validate that only a numeric value is entered
  
  function validateMin() {
  
    var min = document.getElementById("min").value;
  
    if (isNaN(min)) {
  
      var el1 = document.getElementById("valFailMin");
      el1.textContent = "Ok";
  
    } else {
  
      var el1 = document.getElementById("valFailMin");
      el1.textContent = "Only numbers";
  
    }  
  
  }
  
  
  function validateMax() {
  
    var max = document.getElementById("max").value;
  
    if (isNaN(max)) {
  
      var el2 = document.getElementById("valFailMax");
      el2.textContent = "Ok";
  
    } else { 
  
      var el2 = document.getElementById("valFailMax");
      el2.textContent = "Only numbers please";
  
    }  
  
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="custom.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="myForm"&gt;
        &lt;label for="min"&gt;Min&lt;/label&gt;&lt;input id="min" type="number" placeholder="Type a min value" onblur="validateMin()"/&gt;&lt;br&gt;
  
        &lt;span id="valFailMin"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="myForm"&gt;
        &lt;label for="max"&gt;Max&lt;/label&gt;&lt;input id="max" type="number" placeholder="Type a max value" onblur="validateMax()" /&gt;&lt;br&gt;
  
        &lt;span id="valFailMax"&gt;&lt;/span&gt;
      &lt;/div&gt;  
  
      &lt;div id="valSuccess"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script src="validate.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>