title: event function can't call two or more other functions at the same time
body: <p>I made a sample form validation using only plain javascript. Everything was ok until I decided to store the two functions inside an event callback function. I did it so my javascript file can only have lesser lines of code. The callback function can only execute one function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var query = document.querySelector.bind(document);
  
  function isBlank(element) {
    var isblank = (!element.value) ? true : false;
  
    element.setAttribute('data-error', isblank);
  
    return isblank;
  }
  
  function isInvalid(element, regex) {
    var invalidValue = (!element.value.match(regex)) ? true : false;
  
    element.setAttribute('data-error', invalidValue);
  
    return invalidValue;
  }
  
  function checkInput(e) {
    var $this = e.target;
    return [
      isBlank($this),
      isInvalid($this, /^[a-zA-Z ]*$/)
    ];
  }
  
  query('#name').addEventListener('blur', checkInput);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form input[name] {
    border: 1px solid #ccc;
  }
  
  form input[data-error="true"] {
    border-color: red;
  }
  
  form input[data-error="false"] {
    border-color: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="" method="post"&gt;
    &lt;input type="text" name="name" id="name" placeholder="Name" data-error=""&gt;&lt;span class="message"&gt;&lt;/span&gt;&lt;br&gt;
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried the following two options, but it didn't work either:</p>
  
  <pre><code>function checkInput(e) {
    var $this = e.target;
    return {
      execute: [
        isBlank($this),
        isInvalid($this, /^[a-zA-Z ]*$/)
      ]
    };
  }
  
  function checkInput(e) {
    var $this = e.target;
    isBlank($this);
    isInvalid($this, /^[a-zA-Z ]*$/);
  }
  </code></pre>
  
  <p>How can I fix it but make the code cleaner and more organized?</p>