Telerik Forums
Kendo UI for jQuery Forum
3 answers
724 views

I have a page that requests a partial view via AJAX and inserts it into the page. The view contains several kendo DatePickers. When I leave some of the required DatePickers empty and try to submit the form, I'm noticing my validation summary (created by @Html.ValidationSummary(false)) is not displaying anything, though submission is prevented. 

Yesterday I was receiving errors in the validation summary. I had one about a required DatePicker, that is in a hidden kendo Window being empty, and when I re-opened the window to address it, the validation error for the DatePicker was visible, but the DatePicker itself was gone. 

So these specific problems aside for the moment, my question is: I know for the standard jQuery validation and unobtrusive scripts, I have to remove the validator data from the form and then re-parse the form after inserting content dynamically. Is something similar required for kendo validation? Do I need to call kendoValidator() again?

 

What I do for the standard asp.net MVC validation:

//Remove validators and re-add them to include the new fields
var $form = $(form)
    .removeData("validator")
    .removeData("unobtrusiveValidation");
 
$.validator.unobtrusive.parse($form);
Joana
Telerik team
 answered on 05 Sep 2018
1 answer
1.2K+ views

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");
                }

Ivan Danchev
Telerik team
 answered on 30 Aug 2018
2 answers
195 views

We found that following features are totally undocumented , where <text> is a custom string :

  1. options.fields.fieldName.validation.<attribute> = value; is generally passed-through like ad HTML attribute when kendo.ui.Editable is involved for editing corresponding model field <fieldName>
  2. And so on options.fields.fieldName.validation.validationMessage  = "My custom message"; is generally passed-through like ad HTML attribute onto the corresponding INPUT dom element and it is very usefull when you need a custom validation message avoiding to deal with direct DOM manipulation
  3. No document in your online KB mentions this behaviour associated to the Model.define() instead a KB page could be find related to the Validator https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#application-of-custom-message-attributes , I think could save time to developers know that it is possibile and should be documented

Proofs in your code :

The CreateAttributes assembles object which contains the name:value pair from model field validation :

function createAttributes(options) {
    var field = (options.model.fields || options.model)[options.field], type = fieldType(field), validation = field ? field.validation : {}, ruleName, DATATYPE = kendo.attr('type'), BINDING = kendo.attr('bind'), rule, attr = {
        name: options.field,
        title: options.title
    };
    for (ruleName in validation) {
         // ruleName can contains a custom string that is not a validation rule
 
         // and rule will contain its value, for example validationMessage='MyMessage ....'
 
        rule = validation[ruleName];
        if (inArray(ruleName, specialRules) >= 0) {
            attr[DATATYPE] = ruleName;
        } else if (!isFunction(rule)) {
            attr[ruleName] = isPlainObject(rule) ? rule.value || ruleName : rule;
        }
        attr[kendo.attr(ruleName + '-msg')] = rule.message;
    }
    if (inArray(type, specialRules) >= 0) {
        attr[DATATYPE] = type;
    }
    attr[BINDING] = (type === 'boolean' ? 'checked:' : 'value:') + options.field;
    return attr;
}

 

The editor choosed by the kendo.ui.Editable sets DOM attributes via attr() and the previously assembled object

var editors = {
    'number': function (container, options) {
        var attr = createAttributes(options);
        $('<input type="text"/>').attr(attr).appendTo(container).kendoNumericTextBox({ format: options.format });
        $('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);
    },
    'date': function (container, options) {
        var attr = createAttributes(options), format = options.format;
        if (format) {
            format = kendo._extractFormat(format);
        }
        attr[kendo.attr('format')] = format;
        $('<input type="text"/>').attr(attr).appendTo(container).kendoDatePicker({ format: options.format });
        $('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);
    },
    'string': function (container, options) {
        var attr = createAttributes(options);
        $('<input type="text" class="k-input k-textbox"/>').attr(attr).appendTo(container);
    },
    'boolean': function (container, options) {
        var attr = createAttributes(options);
        $('<input type="checkbox" />').attr(attr).appendTo(container);
    },
    'values': function (container, options) {
        var attr = createAttributes(options);
        var items = kendo.stringify(convertItems(options.values));
        $('<select ' + kendo.attr('text-field') + '="text"' + kendo.attr('value-field') + '="value"' + kendo.attr('source') + '=\'' + (items ? items.replace(/\'/g, ''') : items) + '\'' + kendo.attr('role') + '="dropdownlist"/>').attr(attr).appendTo(container);
        $('<span ' + kendo.attr('for') + '="' + options.field + '" class="k-invalid-msg"/>').hide().appendTo(container);
    }
};

 

The validator  looks the ruleKey validationMessage directly on DOM element of a INPUT tag

var Validator = Widget.extend({   
    // ...
    _extractMessage: function (input, ruleKey) {
        var that = this, customMessage = that.options.messages[ruleKey], fieldName = input.attr(NAME), nonDefaultMessage;
        if (!kendo.ui.Validator.prototype.options.messages[ruleKey]) {
            nonDefaultMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;
        }
        customMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;
        return kendo.format(input.attr(kendo.attr(ruleKey + '-msg')) || input.attr('validationMessage') || nonDefaultMessage || input.attr('title') || customMessage || '', fieldName, input.attr(ruleKey) || input.attr(kendo.attr(ruleKey)));
    }
    // ...
})

 

With this technique you can customize one validation message for a model field

 

Paolo
Top achievements
Rank 1
 answered on 20 Mar 2018
5 answers
1.7K+ views

I would like to create a validation message only for dropdownlist.

I'd like to get the text value of label.

label is parent of kendo dropdownlist

var custom = function(input){
    if(input.is("[data-role=dropdownlist]")){
        if(Utils.isNullOrUndefined(input[0].value) || input[0].value.length === 0){
            return true;
        }
        return input.data("kendoDropDownList").value();
    }
    return true;
    }
 
    rules.custom = custom;
    messages.custom = function(input){
        "Insert" + input.closest("label").text()
    }
         
    var validator = {
        validate: function(){
            $(".k-invalid:first").focus();
        },
        rules: rules,
        messages: messages
    };
     
    return $("#form1").kendoValidator(validator).data("kendoValidator");

 

This solution doesn't work

 

 

 

Ivan Danchev
Telerik team
 answered on 26 Jan 2018
3 answers
130 views

kendo.d.ts v2017.3.1026

should be 

 interface DataSourceSchemaModelFieldValidation {
   required?: boolean | { message: string };

}

 

to support custom required message.

Viktor Tachev
Telerik team
 answered on 19 Jan 2018
4 answers
694 views
I documentation I found example how to add red border to widgets. But it is not working for editor and multiselect. 

How can I achieve that?

PS: There is also some strange issue. Textarea doesn't show required message, and multiselect does even if it is not empty. (look attached image)
Nencho
Telerik team
 answered on 10 Jan 2018
1 answer
4.2K+ views

I am new to Kendo UI and trying to implement required field validation inside Kendo grid. All the functionalities like add/update/delete functionalities are working except required field validation.

 

$(document).ready(function () {
 
 
    var dataSource1 = new kendo.data.DataSource({
        batch: true,
        transport: {
 
           // PUT /POST Codes
 
        },
        error: function(e){
            alert('Error code: ' + e.xhr.status + ' - The application encountered an issue please try again. If issue persist contact grh support team');
        },
        pageSize: 500,
        schema: {
            model: {  id:"Id", fields : { firstname : { editable : true , validation : { required : true }, type : "string" },createdby : { editable: false, defaultValue: "arjun.vadi"},createddate : { editable: false },modifiedby : { editable: false },modifieddate : { editable: false },tz : { editable: false, defaultValue: new Date().toString().substr(28,5) }} }
        },
    });
 
    var grid = $("#grid").kendoGrid({
        height: 620,
        dataSource: dataSource1,
        toolbar: ['create', 'save', 'excel'],
        excel: {
            fileName: "TestMandate" + "_Export.xlsx",
            allPages: true
        },
        pageable: {
            numeric: false,
            previousNext: false,
            messages: {
                display: "Total: {2}"
            }
        },
        navigatable: true,
        sortable: true,
        filterable: true,
        resizable: true,
        scrollable: true,
        editable: true,
        columns: [
            { command: [{ name: "destroy", text: "", width: "60px" }], title: " ", width: "100px" },
            { field: "firstname",title:"FirstName",editor: JSHelper.stringEditor, width: 100 , filterable: { multi: true, search: true } },{ field: "createdby",title: "Created By", width: 100, filterable: { multi: true, search: true } },{ field: "createddate",title: "Created Date", width: 100, editor : JSHelper.dateAdminEditor, template: "#= kendo.toString(kendo.parseDate(createddate), 'dd MMM yyyy hh:mm') #", filterable: { multi: true, search: true } },{ field: "modifiedby", title: "Modified By", width: 100, filterable: { multi: true, search: true, search: true } },{ field: "modifieddate", title: "Modified Date", width: 100, editor : JSHelper.dateAdminEditor,  template: "#= kendo.toString(kendo.parseDate(modifieddate), 'dd MMM yyyy hh:mm') #", width:150, filterable: { multi: true, search: true } },
        ],
 
    });
});

 

 

Viktor Tachev
Telerik team
 answered on 20 Dec 2017
3 answers
726 views
I have a two boxes that were previously input elements and are now inline html editors. Can any other element that are not a 'input' element be added onto the validator's list of things to check. The use is in a list view. Or would the only solution be having some hidden elements?
1.<div class="WebDescriptionEditor" data-bind="value: WebDescription" data-role="editor"
2.   contentEditable="true"
3.   data-tools="['bold','italic','underline','strikethrough']">
4.</div>
Thats basically it. The work around i have otherwise is to include a hidden input element after each of the the divs as so:
1.<input type="hidden" name="WebDescription" data-bind="value: WebDescription" />
Then the custom validation on the datasource iterates through the input elements and validates the above. Any way to skip having the extra html?

Thanks,
Matt
Joana
Telerik team
 answered on 11 Dec 2017
1 answer
139 views

Hi, my KenDo UI version is 2017.3.913, my chrome version is 61.0.3163.100

I found that my custom validation rule only fire once when it get error,

here is DOJO code: http://dojo.telerik.com/OGIlA/3

you can re-enter this situation by these step:

1.open dojo link and enter full screen mode

2.open chrome dev tool and set break point on line 72 (

myrule:function(input){...

)

3.click edit button and change unit price to 7777, then it will enter break point.

4.continue, and change value to 7778, then it will enter break point again.

5.continue and change value to 7777, then you can see it will not enter break point ,no fire validate function.

I don't know where I do wrong, or something I forget to setting, please help , thanks.

Dimitar
Telerik team
 answered on 13 Oct 2017
1 answer
198 views
I have a kendo grid with in cell editing. I extended the validator to add a new validation rule and message. This is working correctly.
 
However, I can't seem to change the default error template for the validation message. Here is the code used to extend the validator:
 
(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: {
            uniqueTagName: function (input) {
               ...
        },
        messages: {
            uniqueTagName: resources.Message_TagAlreadyExists
        },
        errorTemplate: "<span>#=message# TEST</span>"
    });
})(jQuery, kendo);

 

I can see from the console that when I look at kendo.ui.validator, the errorTemplate is changed to "<span>#=message# TEST</span>". However, when the (Name) element is validated, I get the default error template.

Through $("#Name").kendoValidator().data("kendoValidator"), i get this template:

<span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"> </span> #=message#</span>

However,both validators have the extended rule and validation message.

I also tried to create a <span data-for="Name" class="k-invalid-msg"> as I have found somewhere in the documentation, but this seems to have no effect.

Boyan Dimitrov
Telerik team
 answered on 07 Sep 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?