Как остановить отправку формы, если один из двух переключателей не проверен пользователем

Question

У меня есть form с двумя переключателями с вариантами доставки. Я хочу проверить, не проверена ли ни одна из переключателей пользователем, тогда она остановит отправку формы и отобразит сообщение, чтобы проверить одну из них, чтобы продолжить.

HTML / PHP

<form method="get">
    <label class="ship-method" style="float: left; margin-right: 20px;">
        <input type="radio" name="dm_shipping_option" id="tttm_courier" value="1" onclick="getCourier(1);" />
        <?php echo $shipping_costs; ?>&euro;&nbsp;<?php echo getValue('name','banners',3); ?>
        <?php echo "<br />"; ?>
        <span class="ship-desc"><?php echo getValue('content','banners',3); ?></span>
    </label>
    <label class="ship-method" style="float: left; margin-right: 20px;">
        <input type="radio" name="dm_shipping_option" id="client_courier" value="0" onclick="getCourier(0);" />
        <?php echo getValue('name','banners',2); ?>
        <?php echo "<br />"; ?>
        <span class="ship-desc"><?php echo getValue('content','banners',2); ?></span>
    </label>
</form>

JavaScript

<script type="text/javascript">
$(document).ready(function () {
    var isCheckedTTCourier = $('#tttm_courier').prop('checked');
    var isCheckedCourier = $('#client_courier').prop('checked');
    if (!isCheckedTTCourier || !isCheckedCourier) {
        alet("Please check a shipment option to continue");
        return false;
});
</script>

Answer 1

См. Мои объяснения в виде комментариев в исходном коде JavaScript ниже.

jQuery( function( $ ) { // document ready
    $('form').on( 'submit', function( oEvent ) { // bind event handler on submit event
        // do your validation as you wrote: "I want to check if none of radio buttons are checked by user"
        // you can do other validation algos here as well
        if (   !document.getElementById('tttm_courier').checked   // button not checked
        &&   !document.getElementById('client_courier').checked ) // and also not checked
        {
            oEvent.preventDefault(); // stop form submit is better than `return false` as it would stop the event from bubbling which is considered to be a bad practice
            alert('Please check a shipment option to continue');
        }
    } )
} );

Answer 2

попробуй этого брата

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form>
<input type="radio" name="epackage" value="1">option 1<br>
<input type="radio" name="epackage" value="2">option 2
<input type="submit" name="payOnline" id="payOnline" value="Pay Online" style="color: red; font-weight: bold; width:100px; height:40px;"/> 
</form>
<script type="text/javascript">
$(function() {
    $("#payOnline").click(function(event) {

        if ($("input:radio[name='epackage']:checked").length == 0) {
            alert('Nothing is checked!');
            event.preventDefault();
            return false;
         }
         else {
            return true;
            // alert('One of the radio buttons is checked!');
         }
    });
});
</script>

Спасибо

Answer 3

Во-первых, в вашем коде есть пара проблем. В операторе if отсутствует закрывающее }, а alet() должно быть alert().

. Что касается проблемы, вам нужно подключить обработчик событий к form, который проверяет убедитесь, что по крайней мере один радио проверен. Если это не так, вы можете отменить отправку формы с помощью preventDefault() и показать пользователю alert(). Попробуйте это:

jQuery(function($) {
  $('form').on('submit', function(e) {
    if ($(this).find('.ship-method:checked').length == 0) {
      e.preventDefault();
      alert("Please check a shipment option to continue");
    }
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
  <label class="ship-method" style="float: left; margin-right: 20px;">
    <input type="radio" name="dm_shipping_option" id="tttm_courier" value="1" /><br />
    <span class="ship-desc"></span>
  </label>
  <label class="ship-method" style="float: left; margin-right: 20px;">
    <input type="radio" name="dm_shipping_option" id="client_courier" value="0" /><br />
    <span class="ship-desc"></span>
  </label>
  <button type="submit">Submit</button>
</form>

Answer 4

изменить скрипт на:

<script type="text/javascript">
$('form').on('submit', function(formEvent) {
    formEvent.preventDefault();
    var isCheckedTTCourier = $('#tttm_courier').is(':checked');
    var isCheckedCourier = $('#client_courier').is(':checked');
    if (isCheckedTTCourier && isCheckedCourier) {
        event.run();
    } else {
        alert("Please check a shipment option to continue");
    }
});
</script>