如何在提交事件上调用两个函数

Question

$(document).ready(function() {
$('#field-warning-message').hide();
let empty_field_error = false;
$('.verify-field').focusout(validateEmptyField);
let resForm = $('.verify-form');
let resFormBtn = $('#submit_reservation_form');
let guestEmailInput = $('#guest-email');
let emailErrorMessage = $('#email-error-message');
let hostEmail = $('#guest-email').data('invalidity');
function validateEmptyField() {
$('.verify-field').each(function() {
if (!$(this).val().length || null) {
$('#field-warning-message').show();
$('#field-warning-message').text("Please fill out required fields.");
$(this).css('border-color', '#c65742');
empty_field_error = true;
} else {
$('#field-warning-message').hide();
$(this).css('border-color', '');
}
})
}
function validateHostEmail() {
$('.validate-unique').each(function() {
if (guestEmailInput.val() === hostEmail) {
emailErrorMessage.text('Cannot use your email.');
emailErrorMessage.addClass('red');
empty_field_error = true;
} else {
emailErrorMessage.text('');
emailErrorMessage.removeClass('red');
}
})
}
// resForm.on('submit', function () {
resFormBtn.on('click', function () {
empty_field_error = false;
validateHostEmail();
validateEmptyField();
if (empty_field_error == false) {
return true;
} else {
return false;
}
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://www.google.com" id="reservation_form" class="verify-form">
<div>
<input type="text" name="first_name" placeholder="First Name" required class="verify-field">
<input type="text" name="last_name" placeholder="Last Name" required class="verify-field">
<input type="email" name="guest_email" id="guest-email" data-invalidity="data" placeholder="Email address" required class="verify-field validate-unique">
</div>
<div id="email-error-message"></div>
<button id="submit_reservation_form" class="verify-form">
Send Reservation
</button>
</form>

我有一个具有输入字段和电子邮件输入字段的表单。表单上的所有字段都由validateEmptyField()验证，一个电子邮件输入字段由validateHostEmail()验证。只有当单击事件附加到resFormBtn(提交按钮)时，验证才能工作，两个函数才会调用。但是，表单应该提交，直到验证满足。

我需要表单使用附加到resForm(表单类)的on submit事件来验证这两个函数，并且在验证满足之前不提交。我试过了，它没有工作，因为只有validateEmptyField()由于某种原因被调用，而validateHostEmail()不是。可能是冒泡或触发问题。不确定。把表单动作google.com在片段。类型"data"在电子邮件字段，并看到验证。谢谢你的帮助。

Answer 1

我重构了代码，问题是在返回false时需要event.stopImmediatePropagation();现在它工作完美!在@noiseymur上大声喊出这个提示。

$(document).ready(function() {
const $warningMessage = $('#field-warning-message');
const $form = $('.verify-form');
const $formBtn = $('#submit_reservation_form');
const $guestEmailInput = $('#guest-email');
const $emailErrorMessage = $('#email-error-message');
const hostEmail = $guestEmailInput.data('invalidity');
$warningMessage.hide();
$('.verify-field').focusout(validateEmptyField);
$form.on('click', validateForm);
function validateEmptyField() {
let hasEmptyField = false;
$('.verify-field').each(function() {
if (!$(this).val().length || null) {
$warningMessage.show();
$warningMessage.text("Please fill out required fields.");
$(this).css('border-color', '#c65742');
hasEmptyField = true;
} else {
$warningMessage.hide();
$(this).css('border-color', '');
}
});
return hasEmptyField;
}
function validateHostEmail() {
let isHostEmail = false;
$('.validate-unique').each(function() {
if ($guestEmailInput.val() === hostEmail) {
$emailErrorMessage.text('Cannot use your email.');
$emailErrorMessage.addClass('red');
$warningMessage.show();
$warningMessage.text("Please fill out required fields.");
$(this).css('border-color', '#c65742');
isHostEmail = true;
} else {
$emailErrorMessage.text('');
$emailErrorMessage.removeClass('red');
}
});
return isHostEmail;
}
function validateForm(event) {
if (validateHostEmail() || validateEmptyField()) {
event.stopImmediatePropagation();
return false;
}
return true;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://www.google.com" id="reservation_form" class="verify-form">
<div>
<input type="text" name="first_name" placeholder="First Name" required class="verify-field">
<input type="text" name="last_name" placeholder="Last Name" required class="verify-field">
<input type="email" name="guest_email" id="guest-email" data-invalidity="data" placeholder="Email address" required class="verify-field validate-unique">
</div>
<div id="email-error-message"></div>
<button id="submit_reservation_form" class="verify-form">
Send Reservation
</button>
</form>