编写一些JavaScript以便表单不提交,字段已经填写完毕,如果用户没有填写,则会弹出一条消息,说“请填写名称字段”或“请填写电子邮件字段”我正在为每个字段编写一个单独的函数(不知道这是否正确),当我将每个函数添加到window.onload时,它只会弹出其中一个消息。任何建议都会很棒。
HTML
<form id="frmContact" name="frmContact" method="post" action="thanks.htm">
<fieldset id="quickSupport">
<legend><strong>Quick Support</strong></legend>
<p> If your request isn't urgent, drop us a quick line and we'll get back to you within 24 hours </p>
<p>
<label for="name">Name:</label>
<input type="text" value="Your Name" name="name" id="name" tabindex="10" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" value="Your Email" name="email" id="email" tabindex="20" />
</p>
<label for="comments">Comments </label>
<br />
<textarea name="comments" value="Message" id="comments" cols="45" rows="5" tabindex="60" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Message</textarea>
</p>
<p>
<input type="submit" name="submit" id="submit" value="Send" tabindex="70" />
</p>
</fieldset>
</form>
<p><span id="errorMessage"></span></p>
<p><span id="errorMessage1"></span></p>
的JavaScript
function prepareEventHandlers () {
document.getElementById("frmContact").addEventListener("submit", function(event) {
// Show message
if (document.getElementById("email").value == "Your Email") {
document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!";
// to STOP the form from submitting
return false;
} else {
// reset and allow the form to submit
document.getElementById("errorMessage").innerHTML = "";
return true;
}
event.preventDefault(); // Prevent form from submitting
}
});
}
function prepareEventHandlersName () {
document.getElementById("frmContact").addEventListener("submit", function(event) {
// Show message
if (document.getElementById("name").value == "Your Name") {
document.getElementById("errorMessage1").innerHTML = "Please provide a name!";
// to STOP the form from submitting
return false;
} else {
// reset and allow the form to submit
document.getElementById("errorMessage1").innerHTML = "";
return true;
}
event.preventDefault(); // Prevent form from submitting
}
});
}
function start() {
prepareEventHandlers();
prepareEventHandlersName();
}
window.onload = start;
答案 0 :(得分:1)
您应该使用浏览器的内置验证属性。
<form id="frmContact" name="frmContact" method="post" action="thanks.htm">
<fieldset id="quickSupport">
<legend><strong>Quick Support</strong></legend>
<p>If your request isn't urgent, drop us a quick line and we'll
get back to you within 24 hours</p>
<p>
<label for="name">Name:</label>
<input type="text" value="Your Name" name="name" id="name"
tabindex="10" required />
</p>
<p>
<label for="email">Email:</label>
<input type="text" value="Your Email" name="email" id="email"
tabindex="20" required />
</p>
<label for="comments">Comments</label>
<br />
<textarea name="comments" value="Message" id="comments" cols="45"
rows="5" tabindex="60"
placeholder="PLACEHOLDER WHEN NO MESSAGE IS WRITTEN" required>Message</textarea>
</p>
<p>
<input type="submit" name="submit" id="submit" value="Send"
tabindex="70" />
</p>
</fieldset>
</form>
当您尝试提交表单时,浏览器将以用户的语言自动显示错误消息。无需JavaScript。
您的代码失败的原因,因为
document.getElementById("frmContact").onsubmit = ...
将覆盖您添加的任何先前的onsubmit
处理程序。
如果您想添加多个功能,则需要使用 .addEventListener()
。
更正确的方法是创建一个执行所有检查的函数,并将其作为处理程序附加一次。
答案 1 :(得分:0)
这两个函数都在运行,但是你在第二个函数中覆盖$('input[type="submit"]').on('click', function(e){
e.preventDefault();
// your ajax request
});
的{{1}}处理程序。为避免这种情况,请不要以这种方式分配事件处理程序。相反,请使用addEventListener。
onsubmit
请注意,当您以这种方式执行此操作时,您无法通过简单地返回false来阻止表单提交。相反,您必须使用事件的preventDefault方法。