Hello,
I checked the Validator's behavior in a sample project using the Validator rules you posted and at my end the MultiSelect was validated as expected. Here's the whole content of the view:
<
form
id
=
"form1"
>
@(Html.Kendo().MultiSelect()
.Name("JobSelected")
.HtmlAttributes(new { @required = "required", @validationMessage = "Enter Job", @class = "form-control job" })
.DataTextField("Text")
.DataValueField("Value")
.Placeholder("Select Jobs...")
.BindTo(new List<
SelectListItem
>() {
new SelectListItem() {
Text = "Item1", Value = "1"
},
new SelectListItem() {
Text = "Item2", Value = "2"
},
new SelectListItem() {
Text = "Item3", Value = "3"
},
new SelectListItem() {
Text = "Item4", Value = "4"
}
})
)
<
button
class
=
"k-button k-primary"
type
=
"submit"
>Submit</
button
>
</
form
>
<
script
>
$(function () {
var validator = $("#form1").kendoValidator({
rules: {
//implement your custom date validation
custom: function (input) {
if (input.is(".drp")) {
var ms = input.data("kendoDropDownList");
if (ms.value() == "-1") {
input.parent().addClass("k-invalid");
return false;
}
else {
input.parent().removeClass("k-invalid");
return true;
}
}
else if (input.is(".job")) {
var ms = input.data("kendoMultiSelect");
if (ms.value().length === 0) {
input.parent().addClass("k-invalid");
return false;
}
else {
input.parent().removeClass("k-invalid");
return true;
}
}
else if (input.is(".date") && input.val() != "") {
var currentDate = Date.parse($(input).val());
//Check if Date parse is successful
if (!currentDate) {
return false;
}
//grad date needs to be in the future
if (input.is("#txtGradDate") || input.is("#txtStartDate")) {
var d = new Date();
if (currentDate <
d
) {
return false;
}
}
}
else if (input.is("[
data-role
=
maskedtextbox
]") && input.val() != "") {
var
maskedtextbox
=
input
.data("kendoMaskedTextBox");
return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
}
return true;
}
}
}).data("kendoValidator");
$("form").submit(function (event) {
if (!validator.validate()) {
$("#personalDiv").removeClass("valid").addClass("invalid");
$('#btnPreviousPage').show();
$('#btnNextPage').show();
break;
} else {
$("#personalDiv").removeClass("invalid").addClass("valid");
}
});
});
</script>
You can test it as is without additional controller configuration since the MultiSelect is bound to a List of SelectListItem. It is not clear what personalDiv stands for in your code snippet, but note that the Validator in the example above is initialized from the form element:
As you can see in this
screenshot the widget is validated on form submission. Let me know whether I am missing something with regard to reproducing the issue.
Regards,
Ivan Danchev
Progress Telerik
Get
quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers.
Learn More.