Validation - Yellow Triangle

[Matt]

Hi,

I notice that the RadDatePicker control has a nice feature - if you put an invalid date into the field, the border of the control turns red and a little yellow triangle with an exclamation mark appears inside the textbox.

Is it possible to do this with a RadTextBox or a RadComboBox?

If so, how do we do this?

Thanks.

Matt.

[Mira]

Hello Matt,

The described triangle is part of the build-in validation of the RadDatePicker.

Please take a look at the following demos to see how the RadTextBox and the RadComboBox controls can be validated:
Input / Validation
ComboBox / Validation Groups

I hope this helps.

Greetings,
Mira
the Telerik team

[Matt]

This seems strange.

I'd like my application to have a consistent look and functionality.

However, RadDatePicker and RadTimePicker include this yellow triangle, whereas RadTextBox and RadComboBox do not.

I can include a standard textbox and use the RadInputManager to add the yellow triangle to the textbox, but it seems I can't do that with the RadTextBox.

Also, I'm using RadFormDecorator, and I'm finding that a standard textbox with validation added via RadInputManager had rounded corners, whereas the textbox in RadDatePicker and RadTimePicker both have square corners.

Matt.

[Mira]

Hello Matt,

Thank you for the additional information.

In order to implement the desired look, I recommend that you add the riError style client-side to the desired input element when the text is not valid.

I hope this helps.

Regards,
Mira
the Telerik team

[Mike]

How do you the riError style to a RadTextBox with a RequiredFieldValidator?  

[Mira]

Hello Mike,

I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this message.

I hope it helps.

All the best,
Mira
the Telerik team

[Robert]

How do I prevent the "Red Border" and "Yellow Exclamation Point Icon" from appearing if the control is blank.    It is appearing when left empty.

I need to allow Nulls for my forms End Date.

Thank you ahead for the help.

[Vasil]

Hello,

By default they are not shown. Even more such functionality is not embedded, so if they are showing for you, then you have custom script in your page. Remove your script, and it will work as you like.
Check this online demo:
http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx
And test sample RadDatePicker in your page to see how it behaves:

<telerik:RadDatePicker runat="server" ID="RadDateTimePickerTest">
</telerik:RadDatePicker>

Kind regards,
Vasil
the Telerik team

[Justin Maslow]

We are using Telerik version 2012.2.912.40. We also would like to get rid of the yellowish triangle and the exclamation mark that are displayed when an invalid date is entered. You said that by default they are not shown, if they are shown we must have custom script on my page.  Can you give more details? What kind of custom script are you talking about? I don't have any custom script that customize the look and feel of the RadDatePicker. This is my markup:

<telerik:RadDatePicker ID="datePicker1" Width="120" MinDate="1/1/1980" DbSelectedDate='<%# Bind("HireDate") %>'
                                runat="server">
                                <ClientEvents OnDateSelected="hireDateSelected" />
                                <Calendar ID="Calendar1" runat="server">
                                    <SpecialDays>
                                        <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="#58FA58">
                                        </telerik:RadCalendarDay>
                                    </SpecialDays>
                                </Calendar>
                            </telerik:RadDatePicker>

No custom script, but if I enter an invalid date, the yellow triangle and exclamation mark show up.  I don't want them to show. Any idea? Thank youj.

[Justin Maslow]

The problem is that the css class .riError defined by telerik contains definition for background as such:

background: url("WebResource.axd?d=EqYOkjlpfChvKqHhdyHm_WG3lx21X9e4RtWtkICqY_oXQ5BUHcAndoLuD5bGxQlYyqBdGTscWR1lXDi9W83oEVdPBS9tuKx2nDMkVIqj103PZ7uaVpDg-XlezkaJP13zMagX7ijWl-H0Gg3U873u4BWafH0-lf2W3oSulVGV8PvZ7cdCPzM6sFDZFNxvMJaY0&t=635222705858351324")
no-repeat scroll 100% -298px #F6F6F6;

To solve the problem, one will have to overwrite this definition with this:

.riError { background: none !important;  }

In your css file.

[Vasil]

Hello Justin,

I am glad that you have resolved the issue already.

To avoid confusion of future readers:

The Robert request was to not show the error class on empty input. And indeed when the input is empty the class is not applied.
In case there is wrong format value that can not be corrected, the DataInput shows this validation.
You can remove the styles using CSS as you did.

Regards,
Vasil
Telerik