Question

我正在尝试创建一个表单，以确保名称输入字段排除“ @”符号，但还要显示相同的框，提示用户填写该字段（如果为空）。我认为每个浏览器的框可能会有所不同。

要进一步解释我的演示，请参阅以下默认表格：

<form id='form-id' action="/" method="post">
  <div class="subscribe-form">
    <div class="form-section">
      <div>
        <input type="text" name="first_name" placeholder="name here" id="name-id" required />
      </div>
      <div>
        <input type="text" name="email" placeholder="Email*" id="email-id" required />
      </div>
          <input id='checkbox-id' type="checkbox" required /> *check here
    </div>
    <button type="submit" value="Subscribe">submit</button> <!-- WITH input type submit -->
  </div>
</form>

只有在所有字段都填写完毕后，点击“提交”按钮才能提交，但不会检查名称字段是否包含“ @”。我不能将其编辑为仅在字段不包含“ @”的情况下提交。

但是这个演示：

<form id='form-id' action="/" method="post">
  <div class="subscribe-form">
    <div class="form-section">
      <div>
        <input type="text" name="first_name" placeholder="name here" id="name-id" required />
      </div>
      <div>
        <input type="text" name="email" placeholder="Email*" id="email-id" required />
      </div>
          <input id='checkbox-id' type="checkbox" required /> *check here
    </div>
    <button onclick="checkName()" type="button" value="Subscribe">submit</button> <!-- changed from input type submit -->
  </div>
<script>
let form = document.getElementById('form-id'),
    ecsName = document.getElementById('name-id'),
    ecsEmail = document.getElementById('email-id'),
    ecsCheckbox =  document.getElementById('checkbox-id');

function checkName() {
  let name = ecsName.value,
      email = ecsEmail.value;

  if(name.includes('@')) {
    alert('includes @');
  } else if (name == '' || email == '') {
    alert('please fill in your details');
  } else if (ecsCheckbox.checked == false) {
    alert ('unckeded');
  } else {
    form.submit();
  }
}
</script>
</form>

包括可确保所有字段均完成的javascript，但我不喜欢该警报，并且希望与以前的表单一样显示相同的提示框。

有什么办法吗？我实质上是在尝试不篡改表单，并在可能的情况下让默认设置完成大部分工作。另外，另一个快速问题-required应该是required='required'吗？感谢您的帮助。

简单使用'required'属性，但也可以验证表单（排除'@'）

0 个答案: