我有一个表单,其中我有两个文本框,一个用于天,另一个用于月份。我想在选择其他字段时需要此字段,同时我还要验证日期字段输入的日期是否在输入的月份中存在。 这是我的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'
}
}
}
}
并且更改是,
如果我删除号码,范围和数字
从规则然后我的元素得到验证,任何帮助将不胜感激!!!
答案 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.");
谢谢