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

Question

所以我有这个注册表格，我正在验证输入字段是否为空以及它们是否使用了正确的模式，但是我收到提交按钮错误并且提交按钮不起作用 未捕获类型错误：无法设置属性 'disabled' 为 null 我希望有人能告诉我如何使用从验证中获取的信息来提交表单 P.S如果你有优化代码我真的很感激

这里是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>`

这里是js和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

改变document.getElementById('Sign_up').disabled=false; 到 document.getElementById('Signup').disabled=false;

显示错误，因为输入的ID有误。使用上面的更改，它将能够根据其 ID 找到正确的元素。

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

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

how to submit form after validating the input fields

html

javascript

validation

jquery

form-submit