Question

我有两个带年份选项的选择字段。我想用这种方式用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;
}

Answer 1

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

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

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

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

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

Answer 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"]              
                },
            }

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

2 个答案: