2012-09-04 36 views
3

我有一个表单,我需要验证两个单选按钮。jQuery验证单选按钮之间的条件条件

有一个值将验证秒,其中第二个值必须等于或高于第一个值。

例如:如果first的值是2,second的值必须是2或更高。

Firts无线电

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

但它不能像我想要的那样工作。只有当我提交表单并且如果我更改了收音机,验证才会起作用,直到我刷新页面。

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

对不起,我的英语。

+0

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

回答

2

首先,添加一个custom methodjQuery.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

编辑只火实时验证在两个无线电被选中之后。

+0

谢谢@ fabricio-matte。它解决了我的问题。谢谢 :) – Junior

0

你有没有加载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!"; 
    } 
}); 
+0

感谢您的关注 – Junior