CODEWITHSUNDEEP
kendo-ui
dan
dan

Reputation: 2957

kendoUI grid popup edit template validation not picking up model validation rules

When you click edit in a grid that is not using a template then the validation rules that you defined for the schema.Model get applied correctly. But if you use a custom template the schema.Model validation rules do not get applied.

I suspect that the answer is that because I am using a custom popup edit template so that I can have a dropdown list, that I have to manually specify the rules for each html input field such as required. I so hope this is not true and that the same rules for defined the schema.Model will also work for an editor template.

Please post if you know the answer, Thanks! Dan

@Daniel Here is my code for getting the validation attributes defined in the model and adding them to the DOM

/**
 * Sets label,input html5 attributes and css based on the validation attributes of the
 * model for the given dataSource
 * @param {Object} myDs    dataSource that contains the Model Schema used for validation.
 */
function addValidationAttributes(myDs) {

    var myFields
    //Pass in DS or pass in model from grid
    if (myDs.options) {
        myFields = myDS.options.schema.model.fields
    } else//model
    {
        myFields = myDs.fields
    }

    $.each(myFields, function(fieldName) {
        //Add validation attributes
        if (this.validation) {
            $('#' + fieldName).attr(this.validation);
            //Set label to required if field is required
            if (this.validation.required) {
                $('label[for=' + fieldName + ']').addClass('required');
                $('#' + fieldName).attr('title', "required");
                //Check if KendoUI widget because it creates an extra span
                if ($('#' + fieldName).is('[data-role]')) {
                    $('.k-widget').after('<span class="k-invalid-msg" data-for="' + fieldName + '"></span>');
                } else {
                    $('#' + fieldName).after('<span class="k-invalid-msg" data-for="' + fieldName + '"></span>');
                }
            }
        } else//optional
        {
            //Non requried fields set to optional exclude KEY ID STAMP
            if (fieldName !== '__KEY' && fieldName !== '__STAMP' && fieldName !== 'ID') {
                //Check if KendoUI widget because it creates an extra span
                if ($('#' + fieldName).is('[data-role]')) {
                    $('.k-widget').after('<span class="optional" data-for="' + fieldName + '"></span>');
                } else {
                    $('#' + fieldName).after('<span class="optional" data-for="' + fieldName + '"></span>');
                }
            }
        }

    });
}

Also just in case you want it I set a class which adds an * before the label of a required field and a class the adds text "Optional" after each no required field. The KEY, ID, and STAMP are fields defined in my model but I don't put them on a form, so you can exclude your entity key field or not if you want.

Here they are

.required:before {
    content: "*";
    color: red
}

.optional:after {
    content: " (optional)";
    color: #777;
}

Upvotes: 2

Views: 3683

Answers (1)

Dani&#235;l Tulp
Dani&#235;l Tulp

Reputation: 1835

use required in your input elements

<input type="text" class="k-input k-textbox" name="Name" data-bind="value:Name" required>

Upvotes: 2

Related Questions