title: Form Validation Vanilla JS
body: <p>I'm building a multipage form and I have some unusual validation requirements.  Here's what I'd like to do/what I have done so far.</p>
  
  <p><strong><em>What I Want to Do:</em></strong></p>
  
  <p>(1) As each form field is filled in, I want a function to run and check that the user-input has met certain conditions -- i.e. for first and last name, that there are no numbers and there is a space in between the names.</p>
  
  <p>(2) Once each of the field are full and have passed as true, I want another function to run that re-enabled a previously disabled "Next" button that will move the user to the next page of the form.</p>
  
  <p><strong><em>What I Have Done</em></strong></p>
  
  <p>(1) Created a mini version of the form with two inputs:</p>
  
  <ol>
  <li>One that takes a first name, a space and a last name</li>
  <li>One that takes a phone number set up the following way xxx xxx xxx</li>
  </ol>
  
  <p>(2) I've <code>console.logged</code> the results with pass/fail logic so I know when certain things are being input by the user, that the code is validating properly.</p>
  
  <p><strong><em>Where I am Stuck:</em></strong></p>
  
  <p>I do not know how to create the secondary code that will reenabled the previously disabled "next" button that will move the form to the next page.</p>
  
  <p>What I would like to do is make it so when the "Next" button is reenabled, and clicked on, it's own <code>onclick</code> function hides the current page, looks for the next page in the sequence and changes its <code>display:block</code> and I believe I have that code worked out separately, but I don't know how to integrate it with my other needs.</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>function checkForm()
  {
   var firstName = document.getElementById("name").value;
   
   var phone = document.getElementById("phone").value;
   
  
   
   function checkFirstName()
   {
    if(firstName == "" || !isNaN(firstName) || !firstName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/))
   {
    console.log("Put a first Name and Last Name");
   }
   else
   {
    console.log("Thank You");
   }
  
   };
   
   checkFirstName();
   
   function checkPhoneNumber()
   {
    if(!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/))
      {
      console.log("Please Put in a proper phone number");
      }
   else
   {
    console.log("Thank you");
    cansubmit = true;
   }
   };
   checkPhoneNumber();
   
  };
  
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  First Name: &lt;input type="text" id="name" onblur="checkForm()" /&gt;&lt;label id="nameErrorPrompt"&gt;&lt;/label&gt;
   &lt;br /&gt;
  
   Phone Number: &lt;input type="text" id="phone" onblur="checkForm()" /&gt;&lt;label&gt;&lt;/label&gt;
   &lt;br /&gt;
   
   &lt;button id="myButton" disabled="disabled"&gt;Test Me&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>