我正在尝试创建一个表单,以确保名称输入字段排除“ @”符号,但还要显示相同的框,提示用户填写该字段(如果为空)。我认为每个浏览器的框可能会有所不同。
要进一步解释我的演示,请参阅以下默认表格:
<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'
吗?感谢您的帮助。