验证输入字段后如何提交表单

Question

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 Uncaught TypeError: Cannot set property 'disabled' of null I was hoping if someone can tell me how can I use the information taken from the validation into submitting the form P.S if you have anyway to optimize the code i would really grateful

here is the html

<h1>Signup</h1>
<form action="#"  id="form_id">
   <p>Username</p>
    <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]">
    <p>Password</p>
    <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[#@!%]" />
    <p>confirm password</p>
    <input type="password" name="confirm_password" id="confirm_password" placeholder="confirm Password"  onkeyup='check();' /> 
    <span id='message'></span>
    <br>
    <input type="submit" id="Signup"  value="Signup" onclick= "inputchecker()" disabled >
</form>`

here is the js and jq

         $('#password').on('input', function(e) {
        this.setCustomValidity('')
          if ($(this).val()  >=1) {
            this.setCustomValidity('')
          }
          this.reportValidity();
          e.target.checkValidity();
        })


        $('#user').on('input', function(d) {
          this.setCustomValidity('')
            if ($(this).val()  >=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";


    }
}

Answer 1

change document.getElementById('Sign_up').disabled=false; to document.getElementById('Signup').disabled=false;

It's showing an error because the input ID is wrong. Using the change above, it will be able to find the correct element based off of its ID.

<input type="submit" id="Signup" value="Signup" onclick= "inputchecker()" disabled >