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

Posted 2023-05-09

【中文标题】验证输入字段后如何提交表单

【英文标题】：how to submit form after validating the input fields

【发布时间】：2020-09-02 05:25:10

【问题描述】：

所以我有这个注册表格，我正在验证输入字段是否为空白，并且它们是否使用正确的模式，但我收到提交按钮错误并且提交按钮不起作用 未捕获的 TypeError：无法将属性“禁用”设置为 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";


    

【问题讨论】：

输入名称是 Sgnup，而不是 Sign_up。更新这一行： document.getElementById('Sign_up').disabled=false;到 document.getElementById('Signup').disabled=false;

天哪，我太愚蠢了，我真的很抱歉

【参考方案1】：

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

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

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

【讨论】：

是的，谢谢你，这是一个愚蠢的错误，但你能帮我吗，我现在怎么提交这个表格？

当点击提交时，它会调用你的名为 inputchecker() 的函数