0

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

2 回答 2

1

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

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

errorLabelContainer我认为您可以使用现有选项、“errorClass”和validClass（有关详细信息，请参阅文档）来实现您在验证选项中尝试做的事情。

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

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

于 2013-06-26T15:51:23.977 回答
1

用它来工作 

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"]              
                },
            }
于 2015-11-27T09:51:08.787 回答