JQuery的复选框验证重复问题

Question

使用 jQuery 验证复选框存在一些问题。验证使用以下代码。但问题是 - 每次我点击提交按钮时，它都会重复。我该如何阻止它？

1. 我想在单击复选框时删除验证错误。

2. 用户必须选择 Atlist 一个或两个复选框，如何应用这个条件？

$('form.checkout').on('submit', function () {
if (!$('input:checkbox').is(':checked')) {
    $("input:checkbox").parent().after("<span class='error'>This field requerd....</span>");
} 

else {
    $("input:checkbox").parent().next(".error").remove();
}
}); 

<p id="checkout_terms">
    <label class="label-for-checkbox">
    <input type="checkbox" name="terms" />
        <span class="woocommerce-terms-and-conditions-checkbox-text">I have read and agree to the website terms and conditions</span>
    </label>
    <input type="hidden" name="terms-field" value="1" />
</p>

Answer 1

每次都删除错误，只有在未选中复选框时才将其添加回来。您不需要 if/else 条件。

// Form submission
$('form.checkout').on('submit', function () {

    let valid = true;

    // Validate all checkboxes in the form
    $(this).find('input:checkbox').each(function () {

        // Start by removing any previous error
        removeCheckboxError(this);

        // Add a new error if the checkbox is unchecked
        if (!$(this).is(':checked')) {
            $(this).parent().after('<span class="error">This field is required...</span>');
            valid = false;
        }
    });
    
    // Only allow the form to submit if all checkboxes were valid
    return valid;
});

// Remove error from a checkbox when clicked
$('form.checkout input:checkbox').click(function () {
    removeCheckboxError(this);
});

// Reusable function to remove errors
function removeCheckboxError(checkbox) {
    $(checkbox).parent().next('.error').remove();
}

JSFiddle here

Answer 2

您可以按照以下代码读取选中复选框的数量并相应地显示或隐藏错误。 不用提交表单和验证，而是使用按钮单击事件并在没有错误时提交表单。

var numOfReqCheckbox = 1; // number of checkboxes required
var errorHtml = "<span class='error'>This field requerd....</span>";
$('#submit').on('click', function () {
  var numOfCheckedCheckbox = $('input:checkbox:checked').length;
if (numOfCheckedCheckbox < numOfReqCheckbox) {
    $("#checkout_terms").append(errorHtml);
} else {
    $("#checkout_terms .error").remove();
    $('form.checkout').submit();//submit form
}
});

.error {color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="checkout">
<p id="checkout_terms">
    <label class="label-for-checkbox">
    <input type="checkbox" name="terms" />
        <span class="woocommerce-terms-and-conditions-checkbox-text">I have read and agree to the website terms and conditions</span>
   </label>
   <label class="label-for-checkbox">
    <input type="checkbox" name="terms" />
        <span class="woocommerce-terms-and-conditions-checkbox-text">I have read and agree to the website terms and conditions</span>
</label>
   <label class="label-for-checkbox">
    <input type="checkbox" name="terms" />
        <span class="woocommerce-terms-and-conditions-checkbox-text">I have read and agree to the website terms and conditions</span>
    </label>
    <input type="hidden" name="terms-field" value="1" />
</p>
<input type="button" value=" Submit " id="submit">
</form>