尽管答案错误,JavaScript表单仍提交
JavaScript form submits despite a wrong answer
如果将错误的答案输入到"你是人类领域"中,我的联系表仍然会提交。我不确定我哪里出了问题,甚至从哪里开始搜索问题 - 我在开发工具控制台中没有错误:
.HTML:
<section class="contact" id="contact">
<div class="container">
<div class="row">
<h2>Contact Me</h2>
</div>
<div class="row">
<div id="form-messages"></div>
<form method="post" name="contactform" id="contactform">
<div class="col-md-6">
<fieldset>
<input name="user_name" type="text" id="name" size="30" placeholder="Name" tabindex="1" required>
<br>
<span id="errorname" class="error">First name is required</span>
<input name="user_email" type="text" id="email" size="30" placeholder="Email" tabindex="2" required>
<br>
<span id="erroremail" class="error">Invalid email address</span>
<input name="user_human" type="text" id="human" size="30" placeholder="Are you human? What is 2+2?" tabindex="3" required>
<span id="errorhuman" class="error">Your answer is incorrect!</span>
<br>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<textarea name="user_message" cols="40" rows="20" id="message" placeholder="Message" tabindex="4" required></textarea>
<span id="errormessage" class="error">Please enter a message</span>
</fieldset>
</div>
<div class="col-md-12">
<fieldset>
<button type="submit" class="btn btn-lg" id="submit" value="Submit" tabindex="5" onclick="return validate();">Send Message</button>
</fieldset>
</div>
</form>
</div>
</div>
</section>
.CSS:
.error {
color: red;
font-style: italic;
font-size: 17px;
visibility: hidden;
}
.JS:
function validate() {
var error = 0;
var errorname = document.getElementById("errorname");
var user_name = document.contactform.user_name.value;
if (user_name === "") {
errorname.style.visibility = "visible";
error = 1;
} else {
errorname.style.visibility = "hidden";
error = 0;
}
var erroremail = document.getElementById("erroremail");
var user_email = document.contactform.user_email.value;
if (user_email === "") {
erroremail.style.visibility = "visible";
error = 1;
} else {
erroremail.style.visibility = "hidden";
error = 0;
}
var wrongAnswer = document.getElementById("wronganswer");
var errorhuman = document.getElementById("errorhuman");
var user_human = document.contactform.user_human.value;
if (user_human === "" || user_human !== 4) {
errorhuman.style.visibility = "visible";
error = 1;
} else {
userhuman.style.visibility = "hidden";
error = 0;
}
var errormessage = document.getElementById("errormessage");
var user_message = document.contactform.user_message.value;
if (user_message === "") {
errormessage.style.visibility = "visible";
error = 1;
} else {
errormessage.style.visibility = "hidden";
error = 0;
}
if(error == 0) {
return true;
} else {
return false;
}
}
任何帮助或方向上的指示都将是辉煌的。
谢谢詹姆斯。
错误很简单,您不会阻止表单提交,这应该在单击提交按钮并调用您的函数后立即完成。因此,表单不关心函数的响应,它会被提交。只需停止表单验证并提交,如下所示:
document.getElementById("submit").addEventListener("click", validate);
function validate(e) {
e.preventDefault(); // do things here }
然后检查答案,如果答案正确,请提交表格,否则return false;
将事件移动到 JS,如果某些内容无效,则更改错误 var 值,如果出现错误或更多错误,则阻止表单提交:
- 输入值是一个字符串,所以如果你需要一个强大的比较,你需要使用:
user_human !== "4"
document.getElementById("submit").addEventListener("click", validate);
function validate(e) {
var false = 0;
var errorname = document.getElementById("errorname");
errorname.style.visibility = "hidden";
if (document.contactform.user_name.value === "") {
errorname.style.visibility = "visible";
error = true;
}
var erroremail = document.getElementById("erroremail");
erroremail.style.visibility = "hidden";
if (document.contactform.user_email.value === "") {
erroremail.style.visibility = "visible";
error = true;
}
var errorhuman = document.getElementById("errorhuman");
var user_human = document.contactform.user_human.value;
errorhuman.style.visibility = "hidden";
if (user_human === "" || user_human !== "4") {
errorhuman.style.visibility = "visible";
error = true;
}
var errormessage = document.getElementById("errormessage");
errormessage.style.visibility = "hidden";
if (document.contactform.user_message.value === "") {
errormessage.style.visibility = "visible";
error = true;
}
if (error) {
e.preventDefault();
alert("form error");
}
}
.error {
visibility:hidden;
}
<section class="contact" id="contact">
<div class="container">
<div class="row">
<h2>Contact Me</h2>
</div>
<div class="row">
<div id="form-messages"></div>
<form method="post" name="contactform" id="contactform">
<div class="col-md-6">
<fieldset>
<input name="user_name" type="text" id="name" size="30" placeholder="Name" tabindex="1" required>
<br>
<span id="errorname" class="error">First name is required</span>
<input name="user_email" type="text" id="email" size="30" placeholder="Email" tabindex="2" required>
<br>
<span id="erroremail" class="error">Invalid email address</span>
<input name="user_human" type="text" id="human" size="30" placeholder="Are you human? What is 2+2?" tabindex="3" required>
<span id="errorhuman" class="error">Your answer is incorrect!</span>
<br>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<textarea name="user_message" cols="40" rows="20" id="message" placeholder="Message" tabindex="4" required></textarea>
<span id="errormessage" class="error">Please enter a message</span>
</fieldset>
</div>
<div class="col-md-12">
<fieldset>
<input type="submit" class="btn btn-lg" id="submit" value="Send Message" tabindex="5">
</fieldset>
</div>
</form>
</div>
</div>
</section>
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- AngularJS JQuery Ajax表单提交等效
- JavaScript表单提交帮助
- PHP表单提交和重定向
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- setTimeOut AFTER jQuery表单提交
- 从函数中选择要触发表单提交的正确元素
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- 表单提交问题,如何在我的URL末尾获得ID的值
- Javascript使用Confirm取消表单提交