title: how to submit form after validating the input fields
body: <p>So I have this form for signup and I am validating the input fields if they are blank or not and if they are using the right pattern but I am getting an error for the submission button and the submission button is not working 
  <strong><em>Uncaught TypeError: Cannot set property 'disabled' of null</em></strong>
  I was hoping if someone can tell me how can I use the information taken from the validation into submitting the form
  <strong><em>P.S if you have anyway to optimize the code i would really grateful</em></strong></p>
  
  <p><strong><em>here is the html</em></strong></p>
  
  <p></p>
  
  <pre><code>&lt;h1&gt;Signup&lt;/h1&gt;
  &lt;form action="#"  id="form_id"&gt;
     &lt;p&gt;Username&lt;/p&gt;
      &lt;input type="text" id="user" placeholder="Enter Username"  pattern="^[a-zA-Z0-9]{8,}$" title="please enter a username with only Letters and numbers[0-9]"&gt;
      &lt;p&gt;Password&lt;/p&gt;
      &lt;input name="password" id="password" type="password" placeholder="Enter Password"  pattern="(?=.*[a-zA-Z].*)(?=.*[A-Z])(?=.*[0-9])(?=.*[#@!%])[a-zA-Z0-9#@!%]{6,}" title="please enter a password with at least 1 capital letter and one special from[#@!%]" /&gt;
      &lt;p&gt;confirm password&lt;/p&gt;
      &lt;input type="password" name="confirm_password" id="confirm_password" placeholder="confirm Password"  onkeyup='check();' /&gt; 
      &lt;span id='message'&gt;&lt;/span&gt;
      &lt;br&gt;
      &lt;input type="submit" id="Signup"  value="Signup" onclick= "inputchecker()" disabled &gt;
  &lt;/form&gt;`
  </code></pre>
  
  <p><strong><em>here is the js and jq</em></strong></p>
  
  <pre><code>         $('#password').on('input', function(e) {
          this.setCustomValidity('')
            if ($(this).val()  &gt;=1) {
              this.setCustomValidity('')
            }
            this.reportValidity();
            e.target.checkValidity();
          })
  
  
          $('#user').on('input', function(d) {
            this.setCustomValidity('')
              if ($(this).val()  &gt;=1) {
                this.setCustomValidity('');
              }
              this.reportValidity();
             d.target.checkValidity();
            })
        $('#user').on('input', function(d) {
            this.setCustomValidity('')
              if ($(this).val()  =='') {
                this.setCustomValidity("please fill out the field");
              }
              this.reportValidity();
               d.target.checkValidity();
            })
          $('#password').on('input', function(e) {
              this.setCustomValidity('')
            if ($(this).val() =='' ) {
              this.setCustomValidity("please fill out the field")
            }
            this.reportValidity();
             e.target.checkValidity();    
          });
  
  
  var check = function() {
      if (document.getElementById('password').value ==
        document.getElementById('confirm_password').value) {
        document.getElementById('message').style.color = 'rgb(1, 126, 11)';
        document.getElementById('message').style.fontSize="20px"
        document.getElementById('message').innerHTML = "Passwords are matching";
        document.getElementById('Sign_up').disabled=false;
      } else {
        document.getElementById('message').style.color = 'rgba(255, 0, 0, 0.829)';
        document.getElementById('message').style.fontSize="20px"
        document.getElementById('message').innerHTML = "Passwords are not matching";
  
  
      }
  }
  </code></pre>