Kendo UI Multiselect blank not firing custom validation

2 posts, 0 answers
  1. Matt
    Matt avatar
    1 posts
    Member since:
    Nov 2011

    Posted 28 Aug 2018 Link to this post

    I have a kendo ui multiselect setup using the code method. It populates fine and I can select values. However if I leave the field blank then run a kendo custom kendoValidator the select field never gets to the custom validation. It's like a blank is being marked as valid. Which means it never even makes it to the custom rules.Is there a setting i need when i create the control to tell it that blanks are not OK?

     

    @(Html.Kendo().MultiSelect()
    .Name("JobSelected")
    .HtmlAttributes(new { @required = "required", @validationMessage = "Enter Job", @class = "form-control job" })
    .DataTextField("Text")
    .DataValueField("Value")
    .Placeholder("Select Jobs...")
    .DataSource(source =>
    {
    source.Read(read =>
    {
        read.Action("JobsGetAll", "Application");
    }).ServerFiltering(true);}).AutoBind(true))

     

     

    //input is never the multiselect box

    var validator = $("#personalDiv").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");

     

     

    if (!validator.validate()) {
                        $("#personalDiv").removeClass("valid").addClass("invalid");
                        $('#btnPreviousPage').show();
                        $('#btnNextPage').show();
                        break;
                    } else {
                        $("#personalDiv").removeClass("invalid").addClass("valid");
                    }

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2129 posts

    Posted 30 Aug 2018 Link to this post

    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:
    var validator = $("#form1").kendoValidator({

    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.
Back to Top