Styling the input box on validation error

4 posts, 0 answers
  1. Willem
    Willem avatar
    2 posts
    Member since:
    Nov 2016

    Posted 17 Nov 2016 Link to this post

    I have the following configuration on my grid regarding validation:

    <ValidationSettings EnableValidation="true" />

     

    And then there are columns that have validation add like this:

    <telerik:GridBoundColumn DataField="Name" HeaderText="Short Name">
        <ColumnValidationSettings EnableRequiredFieldValidation="true">
            <RequiredFieldValidator BackColor="MediumVioletRed" ErrorMessage="*" />
        </ColumnValidationSettings>
    </telerik:GridBoundColumn>

     

    Now, this works just fine. But this just shows a message with a red background. I want to style the input field to use the BackColor value.

    Is there a good way of doing this?

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 22 Nov 2016 Link to this post

    Hello Willem,

    I have tested the column definition that you have and the BackColor is correctly applied to the error message (the MediumVioletRed color).

    On a side note, you can add custom CSS class to the span element and customize it entirely with CSS:
    <RequiredFieldValidator ErrorMessage="*" CssClass="validationClass" />
    .validationClass {
        background: blue;
        color: white;
         
    }

    If further assistance is needed, please share the markup of your RadGrid, so we can have a better idea of the exact scenario.



    Regards,
    Konstantin Dikov
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  3. Willem
    Willem avatar
    2 posts
    Member since:
    Nov 2016

    Posted 08 Dec 2016 Link to this post

    I know how to style the error message. I want to change the style of the related input field.
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 13 Dec 2016 Link to this post

    Hello Willem,

    You can only change the style of the validation error message when the validation fails and there is no specific class name or indication that the INPUT element have failed the validation. You can however take a look at our online demo for server validation, which approach can be used for getting reference to the editor for which the validation failed (with a Template column and EditItemTemplate):

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top