在使用jquery验证器对不在表单标记中的按钮进行验证后提交表单

Question

从那以后，我一直在与这段代码的错误作斗争。碰巧表单没有在此按钮上提交。按钮的类型为button，而不在表单标记中。

$("#step1Btn").click(function () {
var userForm = $("form[name='step1Form']");
if (userForm.valid()) {
userForm.submit(function () {
console.log('submitted o!')
$("#spin1").show();
$("form[name='step1Form'] > span").remove();
$('input[name="emailInput"]').prop('name', "id")
$('input[name="fullNameInput"]').prop('name', "full-name")
$('input[name="phoneInput"]').prop('name', "phone-number")
$.ajax({
type: 'POST',
url: "api/v1/user?" + $(this).serialize(),
success: (result) => {
localStorage.setItem('user', JSON.stringify(result))
localStorage.setItem('authToken', result.authToken);
$("form[name='step1Form'] > span").remove()
$('#step1, #step2').toggle();
$('#step1Title, #step2Title').toggle();
},
error: function (request, exception, errorThrown) {
$("form[name='step1Form'] > span").remove();
$("form[name='step1Form']").prepend('<span class='error'><p>' + request.responseJSON.message + '</p></span>')
},
})
});
} else {
return false;
}
});

以下是的完整表格

<div id="step1" class="col-12 col-md-6">
<form name="step1Form">
<div class="home-icon d-flex justify-content-center align-items-center flex-column">
<img src="images/new-icons/user.png" alt="User Registration logo" height="80" />
<p class="my-3">User Registration</p>
</div>
<div class="form-group">
<label for="fullNameInput">Contact full name</label>
<input name="fullNameInput" class="form-control custom-input" placeholder="First name    Last name" id="fullNameInput">
</div>
<div class="form-group">
<label for="emailInput">Contact email address</label>
<input name="emailInput" type="email" placeholder="[e-mail]" class="form-control custom-input" id="emailInput">
</div>
<div class="form-group">
<label for="confirmEmailInput">Confirm contact email address</label>
<input name="confirmEmailInput" type="email" placeholder="[e-mail]" class="form-control custom-input"
id="confirmEmailInput">
</div>
<div class="form-group">
<label for="phone">Contact phone number</label>
<input name="phoneInput" placeholder="08012345678" class="form-control custom-input" id="phone">
</div>
</form>
<button type="button" class="btn red-btn user-btn custom-btn" id="step1Btn">Next<i id="spin1" class="fa fa-spinner fa-spin"></i></button>
</div>

所以我想看看我哪里错了。每当我在if(userForm.valid(和userForm.submit((.之间放置console.log时，我都可以进行日志记录并查看输出

但一旦我把它放在userform.submit((中，我就不会得到任何值。就像，表格完全没有提交。我不知道是不是因为我打Ajax的方式。。请帮助

Answer 1

您正在将Ajax放入submit。。。。

$("#step1Btn").click(function () {
....
if (userForm.valid()) {
userForm.submit(function () {
....
$.ajax({ ....

这毫无意义，因为Ajax取代了实际的提交。通过这样做，您可以有效地再次通过验证发送它；我看不到.validate()方法，但怀疑您只是在使用默认选项，它将是另一个常规的submit。。。你可能陷入了无路可走的困境。

Ajax的最佳位置是在.validate()方法的submitHandler中。

如果您的按钮在表单之外，则捕获click并手动触发提交，然后由验证插件接管其余部分。

$("#step1Btn").click(function () { // click of external button
$("form[name='step1Form']").submit();  // trigger validation & submission
});
$("form[name='step1Form']").validate({  // initialize plugin
submitHandler: function(form) { // fires when valid
//  YOUR AJAX GOES INSIDE HERE
return false;
},
// other options, rules, etc.
});

阅读submitHandler的文档。