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

问题描述 投票:0回答:1

因此,我有此表单进行注册,如果输入字段是否为空并且使用的是正确的模式,我正在验证输入字段,但是提交按钮出现错误,并且提交按钮不起作用Uncaught TypeError:无法设置属性'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";


    }
}

所以我有此表单用于注册,如果输入字段是否为空并且使用的是正确的模式,我正在验证输入字段,但是提交按钮和...的输入出现错误,]]

< [
更改document.getElementById('Sign_up').disabled=false;document.getElementById('Signup').disabled=false;

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

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

javascript html jquery validation form-submit
1个回答
1
投票
更改document.getElementById('Sign_up').disabled=false;document.getElementById('Signup').disabled=false;

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

© www.soinside.com 2019 - 2024. All rights reserved.