如何禁用提交按钮，直到所有输入类都有 class="valid"答案

【问题标题】：How to disable submit button until all input classes have class="valid"如何禁用提交按钮，直到所有输入类都有 class="valid"
【发布时间】：2021-03-04 09:30:05
【问题描述】：

我想创建一个注册表单。我有 6 个输入：名字、姓氏、电子邮件、密码、密码确认和用户协议复选框。如果输入有class="valid"，则值有效，否则无效。我把所有的类都设置为默认的class="invalid"。我想禁用我的提交按钮，直到所有输入字段都有class="valid"。根据我的研究，我看到应该首先使用window.onload eventlistener 禁用该按钮，但我仍然不知道该怎么做。

这是基本形式：

<form class="signup__form" action="/">
  <input class="invalid" type="text" name="fname" placeholder="name"/> </br>
  <input class="invalid" type="text" name='lname' placeholder="Last Name" /></br>
  <input class="invalid" type="email" name='email' placeholder="E-mail" /></br>
  <input class="invalid" type="password" name="password" placeholder="Password" />
  <input class="invalid" type="password" name="password" placeholder="Password Confirm" />  
  <input class="invalid" type="checkbox" /> User Agreement</br> 
  <button type="submit" >Sign Up</button>
</form>

我正在使用事件监听器控制复选框验证：

checkbox.addEventListener('click', (e) => {
  if (e.target.checked) {
    checkbox.classList.remove('invalid');
    checkbox.classList.add('valid');
  } else {
    checkbox.classList.remove('valid');
    checkbox.classList.add('invalid');
  }
})

剩下的，我用正则表达式检查：

// Regex values
const regexs = {
  fname: /^[a-zA-Z0-9]{3,24}$/,
  lname: /^[a-zA-Z0-9]{3,24}$/,  
  email: /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})$/, 
  password: /^[\w@-]{8,20}$/
};

// Regex Validation
const validation = (input, regex) => {
  if (regex.test(input.value)) {
    input.classList.remove('invalid');
    input.classList.add('valid');
  } else {
    input.classList.remove('valid');
    input.classList.add('invalid');
  }
}

inputs.forEach((input) => {
  input.addEventListener('keyup', (e) => {
    validation(e.target,regexs[e.target.attributes.name.value])
  })
})

【问题讨论】：

标签： javascript html

【解决方案1】：

你可以使用required="required"，那么在字段有值之前不会调用提交。

【讨论】：

【解决方案2】：

这样的东西可能会派上用场。

var form = document.querySelector('.signup__form'), is_valid = false, fields, button;

form.addEventListener('change', function(){

  fields = form.querySelectorAll('input');
  button = form.querySelector('button');
  
  for (var i = fields.length - 1; i >= 0; i--) {
    if( fields[i].classList.contains('invalid') )
    {
      is_valid = false;
      break;
    }
    
    is_valid = true;
  }
  
  is_valid ? button.removeAttribute('disabled'): button.setAttribute('disabled', 'disabled');

});

<form class="signup__form" action="/">
  <input class="invalid" type="text" name="fname" placeholder="name"/> <br>
  <input class="invalid" type="text" name='lname' placeholder="Last Name" /><br>
  <input class="invalid" type="email" name='email' placeholder="E-mail" /><br>
  <input class="invalid" type="password" name="password" placeholder="Password" />
  <input class="invalid" type="password" name="password" placeholder="Password Confirm" />  
  <input class="invalid" type="checkbox" /> User Agreement<br> 
  <button type="submit" disabled>Sign Up</button>
</form>

由于您没有所有代码，因此我自己添加了第二个示例，以便完全测试验证部分。

但你只需要复制上面的 JavaScript 代码，并首先将button 设置为disabled="disabled"。

var form = document.querySelector('.signup__form'),
  is_valid = false,
  fields, button;

form.addEventListener('change', function() {

  fields = form.querySelectorAll('input');
  button = form.querySelector('button');

  for (var i = fields.length - 1; i >= 0; i--) {

    if (fields[i].value.length) {
      fields[i].classList.remove('invalid');
    } else {
      fields[i].classList.add('invalid');
    }

    if (fields[i].classList.contains('invalid')) {
      is_valid = false;
      break;
    }

    is_valid = true;
  }

  is_valid ? button.removeAttribute('disabled') : button.setAttribute('disabled', 'disabled');

});

<form class="signup__form" action="/">
  <input class="invalid" type="text" name="fname" placeholder="name" /> <br>
  <input class="invalid" type="text" name='lname' placeholder="Last Name" /><br>
  <input class="invalid" type="email" name='email' placeholder="E-mail" /><br>
  <input class="invalid" type="password" name="password" placeholder="Password" />
  <input class="invalid" type="password" name="password" placeholder="Password Confirm" />
  <input class="invalid" type="checkbox" /> User Agreement<br>
  <button type="submit" disabled>Sign Up</button>
</form>

注意：此示例不遵循，因为它不验证复选框。

@Enes, 1. kod parçacığındaki JavaScript kodunu kopyalarsan çalışacaktır。 2. Kodu 测试 edebilmen için ekledim。 Bir değer girilmişse onu doğru "有效" kabul eder。

【讨论】：

【解决方案3】：

测试无效类数量的解决方案：

var checkbox = document.querySelector("input[type=checkbox]");
var inputs = document.querySelectorAll("input:not([type='checkbox'])");
var but = document.querySelector("button[type=submit]");
but.disabled= true;
checkbox.addEventListener('click', (e) => {
  if (e.target.checked) {
    checkbox.classList.remove('invalid');
    checkbox.classList.add('valid');
  } else {
    checkbox.classList.remove('valid');
    checkbox.classList.add('invalid');
  }
  but.disabled = !document.querySelectorAll("input.invalid").length == 0;
})



// Regex values
const regexs = {
  fname: /^[a-zA-Z0-9]{3,24}$/,
  lname: /^[a-zA-Z0-9]{3,24}$/,  
  email: /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})$/, 
  password: /^[\w@-]{8,20}$/
};

// Regex Validation
const validation = (input, regex) => {
  if (regex.test(input.value)) {
    input.classList.remove('invalid');
    input.classList.add('valid');
  } else {
    input.classList.remove('valid');
    input.classList.add('invalid');
  }
}

inputs.forEach((input) => {

  input.addEventListener('keyup', (e) => {
    validation(e.target,regexs[e.target.attributes.name.value]);
    but.disabled = !document.querySelectorAll("input.invalid").length == 0;
  })
})

<form class="signup__form" action="/">
  <input class="invalid" type="text" name="fname" placeholder="name"/> </br>
  <input class="invalid" type="text" name='lname' placeholder="Last Name" /></br>
  <input class="invalid" type="email" name='email' placeholder="E-mail" /></br>
  <input class="invalid" type="password" name="password" placeholder="Password" />
  <input class="invalid" type="password" name="password" placeholder="Password Confirm" />  
  <input class="invalid" type="checkbox" /> User Agreement</br> 
  <button type="submit" >Sign Up</button>
</form>

【讨论】：

【解决方案4】：

我会尝试原生使用 HTML 属性 (pattern & required) 和 CSS，而不是屈服于 javascript。试一试，看看感觉如何。请注意，我在您的电子邮件输入中排除了一个模式。

我唯一会使用 javascript 来检查密码字段是否相同，但我会通过将第一个密码输入的密码注入确认密码输入的 pattern 属性来做到这一点，替换 ^[\w@-]{8,20}$ .

粉红色的背景只是用来展示验证规则。

顺便说一句，您在某些 HTML 标记上的格式有误。您不需要在 input 上加上斜杠，您应该输入 <br/>，而不是 </br>。

input:invalid {
  background-color: pink;
}

form:invalid button[type="submit"] {
  opacity: 0.5;
}

<form class="signup__form" action="/">
  <input type="text"     required pattern="^[a-zA-Z0-9]{3,24}$" placeholder="Name"> <br/>
  <input type="text"     required pattern="^[a-zA-Z0-9]{3,24}$" placeholder="Last Name"><br/>
  <input type="email"    required placeholder="E-mail"><br/>
  <input type="password" required pattern="^[\w@-]{8,20}$" placeholder="Password"><br/>
  <input type="password" required pattern="^[\w@-]{8,20}$" placeholder="Password Confirm"><br/>
  <input type="checkbox" required>User Agreement<br/> 
  <button type="submit" >Sign Up</button>
</form>

【讨论】：