Question

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

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

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

Firts Radio

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

但它不能像我想的那样工作。只有当我提交表格并且我更换收音机时，验证才会有效，直到我刷新页面。

我希望它能够“实时”发挥作用。如果我选择较低的值，则会显示一条消息，如果我选择相等或更高的值，则表单将被验证。

抱歉我的英文。

Answer 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

仅在选择了两个无线电后才编辑以启动实时验证。

Answer 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!";
   }
});

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

2 个答案: