我整理了一些Jquery来验证我网站上的表单。基本上,我正在使用event.preventDefault();在无效输入的情况下禁止提交表格。
此代码在Google Chrome中完美运行,但在Firefox中根本不起作用(即使存在错误,表单也会发送到我的服务器)。我做错了什么或者有更合适的方法来实现这个目标吗?
谢谢!
$(document).ready(function() {
//validate application form
$('#applyForm').submit(function() {
var name = $('#name').val();
var email = $('#email').val();
var appForm = $("#appForm").val();
// validate appForm
var extension = appForm.replace(/^.*\./, '');
if (extension == appForm) {
extension = '';
} else {
extension = extension.toLowerCase();
}
switch (extension) {
case 'doc':
case 'docx':
case 'txt':
case 'pdf':
break;
default:
// Cancel the form submission
$('#appFormLabel').css('color', '#B32017');
event.preventDefault();
}
if(name.length <= 1 && email.length >= 6) {
// name field is invalid (highlight name box & block submission)
$('#name').css('border', '2px solid #B32017');
$('#nameLabel').css('color', '#B32017');
event.preventDefault();
} else if (email.length <= 5 && name.length >= 2) {
// email field is invalid (highlight email box & block submission)
$('#email').css('border', '2px solid #B32017');
$('#emailLabel').css('color', '#B32017');
event.preventDefault();
} else if (email.length <= 5 && name.length <= 1) {
// both invalid, highlight and block
$('#name, #email').css('border', '2px solid #B32017');
$('#nameLabel, #emailLabel').css('color', '#B32017');
event.preventDefault();
}
});
$(document).keyup(function(e) {
if(e.keyCode == 13 && $('#name').val() != '' && $('#email').val()) {
$('#submitApply').trigger('click');
}
});
});
答案 0 :(得分:1)
您需要在event
函数中传递submit
:
$('#applyForm').submit(function(event) {
答案 1 :(得分:1)
也许是因为你没有在任何地方明确声明event
。尝试接收这样的功能:
$('#applyForm').submit(function(event) {
// ... more stuff
// event.preventDefault();
});
它可能适用于Chrome,因为它可能会为您捕获此类错误,而Firefox并不是那么宽松(在我看来这是一件好事)。