如何使用jQuery Validate验证月中的日期?

时间:2016-09-16 14:10:35

标签: jquery jquery-validate

我有一个表单,其中我有两个文本框,一个用于天,另一个用于月份。我想在选择其他字段时需要此字段,同时我还要验证日期字段输入的日期是否在输入的月份中存在。 这是我的HTML

<div class="row">   
    <div class="col-xs-5 form-group">
        @Html.LabelFor(model => model.Type)
        @Html.DropDownListFor(x => x.TypeID, new Granite.UserManagement.UserManagementController().GetUserTypeIenumerable(), "Select Type", new { @class = "form-control", tabindex = 10 })
        <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
    </div>
</div>
    <div class="row">        
        <div class="col-xs-5 form-group">
            <div class="col-xs-12">
                <div class="col-xs-4 pull-left">
                    @Html.LabelFor(model => model.BirthDay)
                    @Html.TextBoxFor(x => x.BirthDay, new { @Class = "form-control", tabindex = 25 })
                    <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
                </div>
                <div class="col-xs-4 pull-right">
                    @Html.LabelFor(model => model.BirthDayMonth)
                    @Html.TextBoxFor(x => x.BirthDayMonth, new { @Class = "form-control", tabindex = 26 })
                    <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
                </div>
            </div>

        </div>
    </div>
<div class="row">
    <div class="col-xs-12 form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</div>

这是我的jQuery.Validate方法

$(function () {
        $("#form0").validate({
            debug: true,
            errorClass: 'k-invalid',
            validClass: 'has-success',
            errorElement: 'span',
            rules: {
                TypeID: "required",
               BirthDay: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    },
                    number: true,
                    range: [1, 31],
                    digits: true
                },
                BirthDayMonth: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    },
                    number: true,
                    range: [1, 12],
                    digits: true
                }
            },
            messages: {
                TypeID: "This field is required.",
                               BirthDay: {
                    required: "This field is required.",
                    range: 'The entered range is not correct.',
                    number: 'This number is not valid.',
                    validate_date:true
                },
                BirthDayMonth: {
                    required: "This field is required.",
                    range: 'The entered range is not correct.',
                    number: 'This number is not valid.'
                }
            }
        });
    });

我想要做的就是,我想要使TypeID字段成为必需,并在TypeID字段的条件下验证其他两个控件,除此之外

我还想检查用户在BirthDate字段上输入的日期是否存在于BirthDayMonth字段中提到的月份

有人可以帮我解决如何使用jQuery.Validate插件实现此功能吗?

更新1 我已经更新了我呈现的HTML

<form action="/" data-ajax="true" data-ajax-failure="fail" data-ajax-method="Post" data-ajax-success="success" data-ajax-url="/UserManagement/EditingPopup_Create" id="form0" method="post" novalidate="novalidate">
    <div class="row">
        <div class="col-xs-5 form-group has-success">
            <label for="Type">Type</label>
            <select class="form-control k-valid" data-val="true" data-val-number="The field TypeID must be a number." data-val-required="The TypeID field is required." id="TypeID" name="TypeID" tabindex="10">
                <option value="">Select Type</option>
                <option value="11">Employee(Full Time)</option>
                <option value="12">Employee(Part Time)</option>
                <option value="13">Temp(Long Term)</option>
                <option value="14">Temp(Short Term)</option>
                <option value="15">Security</option>
                <option value="16">Parking</option>
                <option value="17">Vendor</option>
                <option value="18">Consultant</option>
                <option value="19">Third Party</option>
                <option value="20">Samson</option>
            </select>
            <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-5 form-group">
            <div class="col-xs-12">
                <div class="col-xs-4 pull-left has-success has-error">
                    <label for="BirthDay">BirthDay</label>
                    <input class="form-control k-valid k-invalid" data-val="true" data-val-number="The field BirthDay must be a number." id="BirthDay" name="BirthDay" tabindex="25" type="text" value="">
                    <div class="pg-tool-tip"><div class="error-placer">The entered range is not correct.</div><div class="arrow-up"></div></div>
                </div>
                <div class="col-xs-4 pull-right has-error">
                    <label for="BirthDayMonth">BirthDayMonth</label>
                    <input class="form-control k-invalid" data-val="true" data-val-number="The field BirthDayMonth must be a number." id="BirthDayMonth" name="BirthDayMonth" tabindex="26" type="text" value="">
                    <div class="pg-tool-tip"><div class="error-placer">The entered range is not correct.</div><div class="arrow-up"></div></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 form-group">
            <input type="submit" value="Submit" class="btn btn-primary">
        </div>
    </div>
</form>

更新2 我在插件功能中注意到的一件事是,当我对代码进行一些小改动时,它工作正常,但不符合我的要求

rules: {
                TypeID: "required",
               BirthDay: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    }
                },
                BirthDayMonth: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    }
                }
            }

并且更改是,

  

如果我删除号码,范围和数字

从规则然后我的元素得到验证,任何帮助将不胜感激!!!

1 个答案:

答案 0 :(得分:0)

经过长时间的研究,我已经能够实现这一功能,下面是我的代码

BirthDay: {
required: {
depends: function (element) {
    return $('#TypeID').val() == '11' || $('#TypeID').val() == '12'
}
},
number: true,
range: [1, 31],
validateDate: true
},
BirthDayMonth: {
required: {
depends: function (element) {
    return $('#TypeID').val() == '11' || $('#TypeID').val() == '12'
}
},
number: true,
range: [1, 12]
},

我只在TypeID字段的值为11或12时才需要 BirthDay BirthDayMonth 字段,然后我在中创建了一个扩展方法BirthDay 字段名为 validateDate ,如下所示

jQuery.validator.addMethod("validateDate", function (value, element) {
if ($('#BirthDayMonth').val() != '') {
    var month = $('#BirthDayMonth').val();
    var day = $('#BirthDay').val();
    var result = false;
    if (month % 2 != 0) {
     result = day <= 31;
    } else {
    if (month == 2) {
    result = day <= 29
    } else {
    result = day <= 30;
    }
    }
    return result;
} else
{
    return true;
}
}, "Entered date doesnot exist in the month.");

谢谢