jQuery在单选按钮之间使用条件条件进行验证

Posted 2023-03-05

【中文标题】jQuery在单选按钮之间使用条件条件进行验证

【英文标题】：jQuery validate with conditional condition between radio buttons

【发布时间】：2012-08-29 14:26:14

【问题描述】：

我有一个表单需要验证两个单选按钮。

一个值将验证第二个，其中第二个的值必须等于或大于第一个。

示例：如果 first 的值为 2，则 second 的值必须为 2 或更高。

第一广播

<input name="item1grupoangm" id="item1grupoangm1" type="radio" value="1" />1 &nbsp;
<input name="item1grupoangm" id="item1grupoangm2" type="radio" value="2" />2 &nbsp;
<input name="item1grupoangm" id="item1grupoangm3" type="radio" value="3" />3

第二电台

<input name="item1nivelbioseguranca" id="item1nivelbioseguranca1" type="radio" value="1" />1 &nbsp;
<input name="item1nivelbioseguranca" id="item1nivelbioseguranca2" type="radio" value="2" />2 &nbsp;
<input name="item1nivelbioseguranca" id="item1nivelbioseguranca3" type="radio" value="3" />3 &nbsp;

我正在尝试这个：

item1nivelbioseguranca: 
    required: true,
    remote: 
        url: "valida_nb_angm.php",
        type: "post",
        data: 
            item1grupoangm: function() 
                return $("input[name='item1grupoangm']:checked").val()
            ,
            item1nivelbioseguranca: function() 
                return $("input[name='item1nivelbioseguranca']:checked").val()
            ,
        
    
,

valida_nb_angm.php的代码：

  $item1grupoangm = $_POST['item1grupoangm'];
  $item1nivelbioseguranca = $_POST['item1nivelbioseguranca'];

  if ($item1nivelbioseguranca >= $item1grupoangm)
    echo "true";
  else
    echo "false";

但它不像我想要的那样工作。仅当我提交表单并更改收音机时，验证才会生效，直到我刷新页面。

我希望它“实时”工作。如果我选择较低的值，则会出现一条消息，如果我选择相等或更高的值，则会验证表单。

对不起我的英语。

【问题讨论】：

jQuery.validate 就是这样工作的。默认情况下，它在表单提交时执行第一个表单验证。此外，对于如此简单的事情，您可能不需要php 来比较页面中的 2 个值。

【参考方案1】：

首先，将custom method 添加到jQuery.validator：

$.validator.addMethod('item1nivelbioseguranca', function() 
    return +$("input[name='item1nivelbioseguranca']:checked").val() >= +$("input[name='item1grupoangm']:checked").val();
, 'Nível de bio segurança deve ser maior ou igual ao Radio 1');

然后将两个字段都设置为required: true 并将新的自定义方法附加到其中一个：

rules: 
    'item1grupoangm': 
        required: true
    ,
    'item1nivelbioseguranca': 
        required: true,
        item1nivelbioseguranca: true
    

然后，为了使其实时工作，将change 处理程序附加到输入，然后在要验证的输入上调用.valid()：

$('input[name="item1grupoangm"], input[name="item1nivelbioseguranca"]').change(function() 
    var inputs = $('input[name="item1grupoangm"], input[name="item1nivelbioseguranca"]');
    if (inputs.filter(':checked').length === 2) inputs.valid();
);

DEMO

编辑为仅在选择两个无线电后才触发实时验证。

【参考方案2】：

你有 jQuery 加载吗？如果是，试试这个：

$("input[name='item1nivelbioseguranca']").change(function()
   var value1=$("input[name='item1grupoangm']:checked").val();
   var value2=$("input[name='item1nivelbioseguranca']:checked").val();
   if ( value2 < value1 )  
        alert "Please make sure you select a value larger than item1grupoangm!";
        return false;
   
);

忘记后面的部分了..

$("input[name='item1grupoangm']").change(function()
   var value1=$("input[name='item1grupoangm']:checked").val();
   var value2=$("input[name='item1nivelbioseguranca']:checked").val();
   if ( value2 < value1 )  
        alert "Remember to change the value for item1nivelbioseguranca so it is larger than this value!";
   
);