Telerik UI for Windows 8 HTML

Validation of data is of major importance when editing data. You need to prevent the user for typing in both invalid and malicious data into the edited cells. Achieving this with RadGrid and its built-in Telerik.Data.DataSource component is quite easy. All you need to do is describe how each field should be validated. Then, RadGrid will automatically perform validation on the input and display popup messages notifying the user about the invalid data entered.

This article presents a RadGrid, displaying all available validation options. For a more detailed description of setting the data model for editing, check this article: Configuring Data Editing.

Validating RadGrid editing

Following is an example, demonstrating all validation options in RadGrid. Note that the following pieces of code are defined inside dataSource.schema.model.fields. Also, for better understanding of the validation shown below, here is an example of valid data for the RadGrid from this sample scenario:

JavaScript Copy imageCopy
{
    Name: "Jack Miles",
    BirthDate: new Date(1982, 9, 10),
    Email: "jack.miles@example.com",
    HomePage: "http://example.com",
    Points: 20,
    ParticipantID: "19822136", //first four digits are the year of birth
    RecID: 2
}

Required fields

Defining a field as required is done by setting validation.required to true in its definition.

JavaScript Copy imageCopy
Name: {
    validation: {
        required: true
    }
}

Date fields

Date validation is added to a field by setting validation.date to true in its definition. However, note that if you have already defined the field as date (type: "date"), validation will not be needed since it renders a RadDatePicker which always works with valid Date objects.

JavaScript Copy imageCopy
BirthDate: {
    type: "date",
    validation: {
        date: true
    }
}

Email validation

There is also built-in validation for email addresses. To apply it on an edited field, set validation.email to true.

JavaScript Copy imageCopy
Email: {
    validation: {
        email: true
    }
}

URL validation

You can set validation.url to true to a field if it should contain only valid URLs.

JavaScript Copy imageCopy
HomePage: {
    validation: {
        url: true
    }
}

Numeric validation

There are a few options for validating numeric values in RadGrid. In the validation object, you can set the following three properties:

  • min: to compare the input against a minimum value.

  • max: to compare the input against a maximum value.

  • step: input will be valid only if it can be divided by the step value without remainder.

You can use any of these properties separately or combined.

JavaScript Copy imageCopy
Points: {
    type: "number",
    validation: {
        min: 0,
        max: 30,
        step: 5
    }
}

Pattern (regular expression) validation

To validate a value against a regular expression, set validation.pattern to a regular expression of your choice. You can see a sample in the next section.

Custom validation

For more customized validation (for example accessing values from other cells), you can provide a custom validation function. You can give it any name (that is not a reserved JavaScript word). It accepts as value a jQuery object carrying the HTML element of the editor control. It must return true if validation has passed and false if it hasn't.

To provide a validation message, assign a custom attribute to the jQuery element which follows this namin model: data-[fnName]-msg, where [fnName] is the name of the custom validation function.

The following example combines a regular expression check on the value and custom validation, that checks whether the id starts with the year of birth of the participant.

JavaScript Copy imageCopy
ParticipantID: {
    validation: {
        pattern: "\\d{8}",
        checkYear: function (el) {
            var value = el.val().substring(0, 4);
            var year = grid.dataItem(el.closest("tr")[0]).BirthDate.getFullYear();
            if (value != year) {
                el.attr("data-checkYear-msg", "Participant ID does not match birth date");
                return false;
            }
            return true;
        }
    }
}