[英]how to submit form after validating the input fields
所以我有这个注册表格,我正在验证输入字段是否为空白,如果它们使用正确的模式,但我收到提交按钮错误并且提交按钮不起作用Uncaught TypeError: Cannot set 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 >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.