我创建了一个注册页面,每个字段都需要输入和验证。如果字段为空,我使用onsubmit事件调用我的js函数来验证表单,但是即使未正确验证该字段仍会提交。
function validate() {
var streetName = document.getElementById("sN").value;
if (streetName == "" || streetName == null || streetName == undefined) {
window.alert("Sorry");
return false;
}
}
<form name="myForms" action="https://httpbin.org/post " method="post" class="form" onsubmit="return validate()">
<div id="fN">
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter first name" required>
</div>
<br>
<div class="lN">
<label>Last Name</label>
<input type="text" name="lastName" placeholder="Enter last name" required="">
</div>
<br>
<div class="sN">
<label>Street name</label>
<input type="text" name="streetname" placeholder="Enter your street name">
</div>
// Somemore inputs
<input class="buttons" type="submit" name="submit" value="Sign up" onclick="validate()">
</form>
我希望弹出一个窗口,提示“此条目是错误的,并且由于这个原因”,但是无论如何它都会提交
编辑:对不起,我应该在我的帖子中更加清楚。我将在某些输入中使用required,但是最终我将需要编写js代码,以确保电话号码是全数字,而password = passwordconfirm,邮政编码是实际的邮政编码。在JS文件中,我只是显示了我基本上尝试做的事情。
答案 0 :(得分:0)
var streetName = document.getElementById("sN").value;
文档中没有id
元素。
存在一个以sN
作为其类名的元素,但是getElementById
找不到按其类和{{ 1}}将始终为value
。 <div class="sN">
将具有一个值。
答案 1 :(得分:0)
几件事
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", function(e) {
var errors = false;
var streetName = this.streetname.value.trim(); // no more action needed
if (!streetName) errors = true;
// more validations
if (errors) {
window.alert("Sorry");
e.preventDefault();
}
});
});
<form id="myForm" action="https://httpbin.org/post " method="post" class="form">
<div id="fN">
<label>First Name</label>
<input type="text" name="firstName" placeholder="Enter first name" >
</div>
<br>
<div class="lN">
<label>Last Name</label>
<input type="text" name="lastName" placeholder="Enter last name" >
</div>
<br>
<div class="sN">
<label>Street name</label>
<input type="text" name="streetname" placeholder="Enter your street name">
</div>
<input class="buttons" type="submit" name="SubmitButton" value="Sign up">
</form>