Validation - Yellow Triangle

11 posts, 0 answers
  1. Matt
    Matt avatar
    9 posts
    Member since:
    Oct 2010

    Posted 03 Mar 2011 Link to this post

    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.
  2. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 07 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    9 posts
    Member since:
    Oct 2010

    Posted 08 Mar 2011 Link to this post

    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.
  5. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 10 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Mike
    Mike avatar
    26 posts
    Member since:
    Jul 2008

    Posted 16 Mar 2011 Link to this post

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



  7. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 19 Mar 2011 Link to this post

    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
  8. Robert
    Robert avatar
    1 posts
    Member since:
    Sep 2012

    Posted 08 May 2013 Link to this post

    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.
  9. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Justin Maslow
    Justin Maslow avatar
    15 posts
    Member since:
    Apr 2010

    Posted 14 May 2014 in reply to Vasil Link to this post

    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.








  11. Justin Maslow
    Justin Maslow avatar
    15 posts
    Member since:
    Apr 2010

    Posted 14 May 2014 in reply to Justin Maslow Link to this post

    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.

  12. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 15 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017