CODEWITHSUNDEEP
javascriptasp.net-mvckendo-ui
Prisoner ZERO
Prisoner ZERO

Reputation: 14166

Kendo Validator Displays Wrong Default Message for ComboBox

The messages within the INPUT ELEMENTS are populated correctly from data annotations, but the KendoValidator seems to be creating something different.

To keep it simple, lets just look at ONE of the drop-downs...

HTML:
Notice how data-val-required contains the actual correct message?

<span class="k-widget k-combobox k-header" style="width: 100%;">
    <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default input-validation-error">
        <input name="Entity.DeviceTypeId_input" class="k-input k-valid" type="text" autocomplete="off" role="combobox" aria-expanded="false" placeholder="Select Device Type..." tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="both" aria-owns="Entity_DeviceTypeId_listbox" aria-busy="false" aria-activedescendant="bec66a14-dad2-4632-84ba-02a9e3b5a10d" style="width: 100%;">
        <span tabindex="-1" unselectable="on" class="k-select">
            <span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1" aria-controls="Entity_DeviceTypeId_listbox">select</span>
        </span>
    </span>
    <input data-val="true" data-val-number="The field DeviceTypeId must be a number." data-val-required="Device Type is required." id="Entity_DeviceTypeId" name="Entity.DeviceTypeId" required="required" style="width: 100%; display: none;" type="text" aria-required="true" data-role="combobox" aria-disabled="false" aria-readonly="false" aria-invalid="true" class="k-invalid">
</span>

DATA ANNOTATION:
As you can see, the message in data-val-required is correct...

public class DeviceAnnotations
{
    [Required(ErrorMessage = "Device Type is required.")]
    public object DeviceTypeId { get; set; }

    [Required(ErrorMessage = "State is required.")]
    public object StateId { get; set; }
}

JAVASCRIPT:
I am open to updating the JavaScript, but I would rather understand WHY & WHERE wrong messages come from...

var validationRoutine = {
    validate: function (e) {

        var comboBoxes = $(".k-combobox");

        $.each(comboBoxes, function (key, value) {

            var $input = $(value).find("input.k-invalid");    //<-- this is where Kendo foolishly places k-invalid
            var $span = $(this).find("span.k-dropdown-wrap"); //<-- this span controls the dropdown's appearance.

            if ($input.length > 0) { // k-invalid exists...
                $span.addClass("input-validation-error");
                return;
            }

            $span.removeClass("input-validation-error");
        });
    }
};

$('form').kendoValidator(validationRoutine);

SCREEN SHOT:
enter image description here

Upvotes: 1

Views: 946

Answers (1)

Jigar Shah
Jigar Shah

Reputation: 6223

Not sure about this, but it happens because you have required attribute and it is showing the error message based on your name="Entity.DeviceTypeId" that is

Entity DeviceTypeId is required

Can you please try by adding 

validationMessage="Device Type is required."

to your input.

I think this should work, I have used it but not in asp

Upvotes: 2

Related Questions