Проблема с повторением проверки флажка в jQuery

ProgramBox

Проблема с повторением проверки флажка в jQuery

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#jquery #wordpress #woocommerce

Вопрос:

Есть несколько проблем с проверкой флажка с помощью jQuery. Проверка выполняется с помощью следующего кода. Но проблема в том, что каждый раз, когда я нажимаю кнопку «Отправить», она повторяется. Как мне это остановить?

Я хочу удалять ошибку проверки всякий раз, когда я нажимаю на флажок.
Пользователь должен установить по крайней мере один или два флажка, как применить это условие?

 $('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>

Ответ №1:

Каждый раз устраняйте ошибку и добавляйте ее обратно, только если флажок не установлен. Вам не нужно условие «если/иначе».

 // 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 здесь

1. Большое спасибо. Я принял твой код. Реши мою первую проблему. Не могли бы вы помочь мне с проблемами номер два и три, пожалуйста?

2. Отлично. Но после нажатия на флажок ошибка не удаляется. В чем проблема?

3. @MaryXNabors Проверьте ссылку, которую я поместил в нижней части поста. Его следует удалить. Если нет, то в вашем коде происходит что-то еще или, возможно, ваш HTML отличается, и в этом случае вам следует опубликовать свой полный HTML-код формы и JS, которые у вас есть.

4. Я проверил это. Хорошо работает в HTML. Но есть проблема с woocommerce. Но я исправил это по-другому. Большое спасибо. В этой связи я сталкиваюсь еще с несколькими проблемами. Я написал об этом в stackoverflow. Но ответа не получил. Пожалуйста, помогите мне? Должен ли я поделиться ссылкой здесь?

Ответ №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>