Jquery 验证值大于或等于，不起作用，为什么？答案

【问题标题】：Jquery validate value greater or equal, does not work, why?Jquery 验证值大于或等于，不起作用，为什么？
【发布时间】：2013-06-26 12:27:12
【问题描述】：

我有两个带有年份选项的选择字段。我想以这种方式使用 jquery 验证插件控制它们，因此第二个选择字段“bis”必须大于或等于第一个“von”......现在我制作了一个脚本，但它不能以正确的方式工作。

错误消息在更正值时没有被删除，我不知道如何修复它，是验证中的某个地方或隐藏具有类的元素时出现的问题...

我希望有人可以帮助我设置此验证以正常工作..

jsfiddle 中的情况：http://jsfiddle.net/dzorz/CbKZq/

html:

<div class="container">
<form id="addEntry" method="post" action=''>
<fieldset>
        <select class="span2 von" id="von" name="von">
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
        </select>
        <select class="span2 bis" id="bis" name="bis">
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
        </select>
            <button type="submit">apply</button>
    </fieldset>
    </form>
    <div class="year_container">
    </div>
</diV>

脚本

$("#addEntry").validate(
    {
        rules:{ 

        },
        messages:{

        },
        errorPlacement: function(error, element) {
            $(element).filter(':not(.valid)').addClass("invalid");
            error.appendTo($('.year_container'));

        },
        success: function(error) {
            $("#addEntry").find('.valid').removeClass("invalid").addClass("success");
            $(".year_container").find('.error').hide('.error');
        },
    });

jQuery.validator.addMethod("greaterOrEqualThan", function(value, element, params) {

    if (!/Invalid|NaN/.test(new Date(value))) {
        return new Date(value) >= new Date($(params).val());
    }

    return isNaN(value) && isNaN($(params).val()) 
    || (Number(value) > Number($(params).val())); 
},'end year must be greater or equal than/to start year.');

$(".bis").rules('add', { greaterOrEqualThan: ".von" });

css

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.error{
   display:inline !important;
   color: red !important;
}

.invalid {
    border: 1px solid red !important;
}

.success{
    border: 1px solid green !important;
}

【问题讨论】：

标签： jquery date jquery-validate

【解决方案1】：

您的errorPlacement 和success 函数是问题的一部分。但主要问题是当.vis 更改时，Validate 不会重新检查.bis 以确保它仍然是greaterOrThanEqualThan。所以要解决主要问题，添加以下代码：

$('.von').change(function(){$('.bis').valid();});

我认为您可以使用现有选项 errorLabelContainer、'errorClass' 和 validClass 来实现您在验证选项中尝试执行的操作（有关详细信息，请参阅 docs）。

$("#addEntry").validate({
    errorLabelContainer: '.year_container',
    validClass: 'success',
    errorClasss: 'invalid'
});

工作示例：http://jsfiddle.net/ryleyb/CbKZq/1/

【讨论】：

【解决方案2】：

使用它来工作

jQuery.validator.addMethod("greaterThan", function(value, element, params) {

        if ($(params[0]).val() != '') {    
            if (!/Invalid|NaN/.test(new Date(value))) {

    //console.log("innder",new Date(value).getTime() >= new Date($(params[0]).val()).getTime());
                return new Date(value).getTime() >= new Date($(params[0]).val()).getTime();
            }    
            return isNaN(value) && isNaN($(params[0]).val()) || (Number(value) > Number($(params[0]).val()));
        };
        return true; 
    },'Expiry date Must be greater  than and equal to {1}.');

用法

rules: {
               'promo[expire_date]': {
                    required:true,
                    greaterThan: ["#start_date","Start Date"]              
                },
            }

【讨论】：