时间戳

首页 > 解决方案 > 如何禁用提交按钮，直到所有输入类都有 class="valid"

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

问题描述

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

这是基本形式：

<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])
  })
})

标签： javascripthtml

解决方案

我会尝试原生使用 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>

推荐阅读