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

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

试试这个兄弟

<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

在下面的 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 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>