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

Question

我有一个 form，有两个单选按钮和发货选项。我想检查 none 个单选按钮是否被用户选中然后它将停止表单提交并显示一条消息以检查一个以继续。

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

将脚本更改为：

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

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

在下面的 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');
        }
    } )
} );

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

How to stop form submission if one of two radio buttons are not checked by user

javascript

jquery

events

event-handling

form-submit