CODEWITHSUNDEEP
jqueryasp.net-mvckendo-uitelerik
Larry Hu
Larry Hu

Reputation: 11

Kendo DatePickerFor with JQuery validation

I've been blocked couple of days when using Telerik Kendo DatePickerFor control. All other controls was working great before adding DatePickerFor control. It supposes to validate 'ProjectName' drop down list and other check boxes (ignored in this post) with all error messages hanging at the top of the UI page. After adding the date picker control and validation, the model do get the correct http post and datetime, but none of the validation message show up if any input is invalid. If removing date time picker control, the validation will go back to normal. Any clue is appreciated.

Cshtml

@section Scripts {
    @Scripts.Render("~/bundles/kendo")
    <script src="~/Scripts/custom.validate.js"></script>
    <script type="text/javascript">
        $.validator.setDefaults({
            ignore: ""
        });
    </script>
}
@(Html.Kendo().DropDownListFor(model => model.ProjectName).Name("ProjectName")...)
@Html.Kendo().DatePickerFor(model => model.UptoTimestamp)

Model 

public class IntegrationModel
{
    public string ProjectName { get; set; }
    public DateTime? UptoTimestamp { get; set; }
}

JQuery validator

$(document).ready(function () {

$.validator.addMethod("validateType",
    function (value, element) {
        return $('#rbFor')[0].checked || $('#rbRev')[0].checked;
    });

$.validator.addMethod("validateUptoTimestamp",
    function (element) {
        var value = $(element).val();
        var date = kendo.parseDate(value);
        if (!date) {
            return false;
        }
        return true;
    });

$('#schedule_form').validate({
 rules: {
        ProjectName: {
            required: true
        },
        UptoTimestamp: {
            validateUptoTimestamp: true
        }
    },
    messages: {
        ProjectName: {
            required: "Please select a project"
        },
        UptoTimestamp: {
            required: "Please provide a valid time stamp"
        }
    },
    errorContainer: $('#errorContainer'),
    errorLabelContainer: $('#errorContainer ul'),
    wrapper: 'li'
});
})

Upvotes: 1

Views: 779

Answers (1)

kryptonkal
kryptonkal

Reputation: 894

Try setting the validator to validate hidden fields. Kendo will hide the original input for the date.

$("#schedule_form").validate().settings.ignore = ":hidden:not(input)";

Upvotes: 1

Related Questions