大家好我从以下代码发布用户输入时遇到问题。只有在单击提交按钮两次后才会发布信息。请查看我的代码并告诉我是否有任何需要更改的内容。
提前谢谢
<script>
function validate(form) {
fail = validateName(form.name.value)
fail += validateEmail(form.email.value)
fail += validateCity(form.city.value)
if (fail == "") {
$(function () {
$('#submitbtn').click(function (event) {
event.preventDefault();
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
});
});
}
else {
document.getElementById('errors').innerHTML = fail;
}
return false
}
function validateName(field) {
if (field == "") return "No name was entered.<br/>"
else if (field.length < 3) return "Please enter a valid name.<br/>"
else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
return ""
}
function validateEmail(field) {
if (field == "") return "No email was entered.<br/>"
else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
return ""
}
function validateCity(field) {
if (field == "") return "No city was entered.<br/>"
else if (field.length < 3) return "Please enter a valid city.<br/>"
else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
return ""
}
</script>
</head>
<body id="body-results-page">
<div class="modalDialog" id="openModal">
<div>
<a class="close" href="#close" title="Close">X</a>
<h2>Newsletter Sign-Up</h2>
<form action="" name="subscribe1" id="subscribe1" method="POST" autocomplete="off" onSubmit="return validate(this)">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>
<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>
<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"/>
<button type="submit" name="submit" id="submitbtn" class="submitbtn" value="Submit this!">Subscribe Now!</button>
<br style="clear:both;">
</div>
<input type="hidden" name="MM_insert" value="subscribe1">
</form>
答案 0 :(得分:1)
因为您在提交时调用函数validate(form)
并在之后向按钮添加提交处理程序但未调用它。
解决方案 - 将点击提交处理程序附加到按钮后调用提交处理程序。
$('#submitbtn').click();
喜欢这个
if (fail == "") {
$(function () {
$('#submitbtn').click(function (event) {
event.preventDefault();
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
}).click();
});
}
或
如果条件为真,最好不要附加提交处理程序直接运行AJAX请求。
像这样if (fail == "") {
action = $(form).attr('action');
$.post(action, $(form).serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
}
答案 1 :(得分:0)
您不需要绑定提交处理程序。当您在validate(form)
函数中执行验证时。
所以而不是
if (fail == "") {
$(function () {
$('#submitbtn').click(function (event) {
event.preventDefault();
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
});
});
}
只需使用
if (fail == "") {
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
}