使用Jquery Validate插件在文本字段上动态设置最小值

时间:2010-12-15 17:35:10

标签: javascript jquery validation

我正在尝试在一个字段上动态更新最小值,具体取决于其他字段的输入。简而言之,我的代码是:

$("#new_project").live("click", function() {

    switch($('input:radio[name=quality-level]:checked').val()){
        case 'average' : ppw = .006;
        case 'below-average' : ppw =.004;
        case 'good' : ppw = .008;
        case 'very-good' : ppw = .016;
    }

    if ($('#minimum-word-length').val() && $('input:radio[name=quality-level]:checked').val())
    {
        min_price = $('#minimum-word-length').val() * ppw;

    }

    $("#new_project, .edit_project").validate({
    rules: {
    ...
    "price-per-article": {required: true, number: true,  min:min_price},
    ...
    },
    errorPlacement: function(error, element) { }


    });

});

最低价格设置正确,并正确更新。也就是说,无论出于何种原因,最小值规则都不会更新我认为是因为验证代码仅加载在文档加载上。所以我猜有没有办法重新加载规则,以便在填充两个必要字段时最小值发生变化?

谢谢!

3 个答案:

答案 0 :(得分:5)

问题是您是在初始加载时使用每篇文章的价格设置验证对象。我不熟悉验证插件,但一般情况下,如果您的属性实时更改了对象,您将需要为该属性使用回调函数,而不是在加载时设置它的数据。

因此,对于每篇文章的价格,它可能看起来像:

"price-per-article": {
  required: true,
  number: true,
  min: function () { return $('#minimum-word-length').val() * ppw; }
}

答案 1 :(得分:1)

不是为每篇文章的价格验证设置固定值,而是将其更改为匿名函数:

"price-per-article": {
    required: true,
    number: true,
    min: function() { return min_price; }
}

这样,每次调用验证时都会检查min_price的值。

答案 2 :(得分:0)

此示例获得最小年份和年份。最大年份来自min:

$(document).ready(function () {
    function getMinYear() {
        var d = new Date();
        var y = parseInt(d.getFullYear());

        console.log("Min: " + y);
        return y;
    }

    $("#frmAddCard").validate({
        rules : {
            year : {
                required : true,
                number: true,
                min: getMinYear(),
                max: getMinYear() + 10
            }
        },
        messages : {                
            year : {
                required : "Expiration Date: Please enter valid year (e.g. 2016)",
                number : "Expiration Date: Please enter valid year (e.g. 2016)",
                min : function (elem) {
                    var y = getMinYear();

                    return "Min: Please enter the value between " + y.toString() + " and " + (y + 10).toString();
                },
                max : function (elem) {
                    var y = getMinYear() + 10;

                    return "Max: Please enter the value between " + y.toString() + " and " + (y + 10).toString();
                }
            }
        },
        submitHandler : function (form) {
        },
        invalidHandler : function (event, validator) {              
        }
    });
});
相关问题