如果验证失败，禁用提交按钮

Question

如果下面三个验证规则都失败，我想禁用我的提交按钮，否则禁用false。任何帮助

<script>
const form = document.getElementById('signup-form');
let name = document.getElementById('name');
let email = document.getElementById('email');
let password = document.getElementById('password');
let button = document.getElementById("signup-button");
form.addEventListener('keyup', (e) => {
e.preventDefault();
checkValidation();
});
function checkValidation() {
let nameValue = name.value.trim();
let emailValue = email.value.trim();
let passwordValue = password.value.trim();
let emailValidate = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
if (nameValue == "" || nameValue == null) {
document.getElementById('name-error').style.display = 'block';
document.getElementById('name-error').innerText = "Name Cannot be blank";
} else {
document.getElementById('name-error').style.display = 'none';
}
if (emailValue == "" || emailValue == null) {
document.getElementById('email-error').style.display = 'block';
document.getElementById('email-error').innerText = "Email Cannot be blank";
} else if (!emailValidate.test(emailValue)) {
document.getElementById('email-error').style.display = 'block';
document.getElementById('email-error').innerText = "Please Enter a Valid email";
} else {
document.getElementById('email-error').style.display = 'none';
}
if (passwordValue == "" || passwordValue == null) {
document.getElementById('password-error').style.display = 'block';
document.getElementById('password-error').innerText = "Password Cannot be blank";
} else {
document.getElementById('password-error').style.display = 'none';
}
}
</script>

现在我想禁用我的提交按钮?怎样才能实现呢

Answer 1

在这个函数中，初始化一个变量，比如isValid到true。

检查中，若有检查不通过，则设置"isValid"为"false"。

在函数的底部，添加一个启用或禁用Submit按钮的条件。我提供了一个示例代码供您参考。

if (isValid === true) {
// Enable the submit button
}
else {
// Enable the submit button
}

Answer 2

你可以添加这样一个标志:

<script>
const form = document.getElementById('signup-form');
let name = document.getElementById('name');
let email = document.getElementById('email');
let password = document.getElementById('password');
let button = document.getElementById("signup-button");
let error = false;
form.addEventListener('keyup', (e) => {
e.preventDefault();
checkValidation();
});
if(error){
button.setAttribute('disabled', '')
}else{
button.removeAttribute('disabled')
}
function checkValidation() {
let nameValue = name.value.trim();
let emailValue = email.value.trim();
let passwordValue = password.value.trim();
let emailValidate = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
if (nameValue == "" || nameValue == null) {
document.getElementById('name-error').style.display = 'block';
document.getElementById('name-error').innerText = "Name Cannot be blank";
error = true;
} else {
document.getElementById('name-error').style.display = 'none';
}
if (emailValue == "" || emailValue == null) {
document.getElementById('email-error').style.display = 'block';
document.getElementById('email-error').innerText = "Email Cannot be blank";
error = true;
} else if (!emailValidate.test(emailValue)) {
document.getElementById('email-error').style.display = 'block';
document.getElementById('email-error').innerText = "Please Enter a Valid email";
} else {
document.getElementById('email-error').style.display = 'none';
}
if (passwordValue == "" || passwordValue == null) {
document.getElementById('password-error').style.display = 'block';
document.getElementById('password-error').innerText = "Password Cannot be blank";
error = true;
} else {
document.getElementById('password-error').style.display = 'none';
}
}
</script>