如果用户未选中两个单选按钮之一，如何停止表单提交

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

首先，您的代码中有几个问题。 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 2

在下面的 JavaScript 源代码中查看我作为 cmets 的解释。

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 3

试试这个兄弟

<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 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>