jQuery 验证两个字段（复选框和文本字段）

Question

我有 2 个字段

<input type="text" name="num_gals" placeholder="Num of Gallons">
<input type="checkbox" value="TRUE"  name="full_tank">Full Tank?

我正在使用 jquery-validation 来执行以下规则。输入字段 "num_gals" 应具有非零值或应选中 "full_tank" 复选框。

我尝试了以下方法，但它似乎不起作用。

rules:
{
    num_gals:   
    {
        required: function() 
        {
            if ($('.full_tank').val(':checked')) {
                return false;
            } else {
                return true;
            }
        }
    },
    full_tank:
    {
        required: function() 
        {
            if ($('.num_gals').val() == '') {
                return true;
            } else {
                return false;
            }
        }
    }
},

messages:
{
    num_gals:
    {
        required: 'Provide Num Gals or Check Full Tank'
    },
    full_tank:
    {
        required: 'Provide Num Gals or Check Full Tank'
    }
}

非常感谢您的帮助！

Answer 1

你有以下错误...

$('.full_tank') 正在寻找名为 full_tank 的 class，在这种情况下，没有这样的 class。您需要 select name 属性与 $('input[name="full_tank"]')。对你的另一个 selector.
.val(':checked') 正在寻找 :checked 的 value，但没有这样的东西。要确定它是否 IS 已检查，请使用 jQuery .is().
.val() == '' 可以正常工作，但可以用 .is(':blank') 代替，由于插件的自定义 :blank select或.

请评论：jQuery Selector Reference and jQuery Validate Selector Reference。

因为你的条件函数只是 returns 一个基于布尔值结果的布尔值，你可以通过在条件函数前面放一个 return 来缩短它。

rules: {
    num_gals: {
        required: function() {
            return ! ($('input[name="full_tank"]').is(':checked'));
        }
    },
    full_tank: {
        required: function() {
            return ($('input[name="num_gals"]').is(':blank'));
        }
    }
},

顺便说一句：您的代码是 JavaScript，所以 it's best to avoid Allman code style, typically used with PHP, because JavaScript automatically inserts semicolons。

演示：http://jsfiddle.net/r4arpshm/

Answer 2

只需替换这一行

if ($('.full_tank').is(':checked')) {

jQuery 验证两个字段（复选框和文本字段）

jQuery Validate over two fields (checkbox and text field)

jquery

jquery-validate