Unplanned
Last Updated: 05 Apr 2021 20:36 by ADMIN
Matthew
Created on: 05 Apr 2021 20:19
Category: MonthYearPicker
Type: Feature Request
1
Would like the DateInput of the MonthYear Validation to meet Accessibility Standards

Hello, 

Currently, when a user types in the date instead of using the popup, the textbox returns a red outline but it doesn't allow integrating with the built-in asp.net validators. 

See the below image for a reference. It would be nice if this could also add a validation output.

I did try to use the Regular Expression and Custom Validators without success. When using them, I found that even when a correct date was input, it would throw an error. 

See the following screenshot for reference to this.

Below is the code that I used.

<telerik:RadMonthYearPicker EnableAriaSupport="true" EnableKeyboardNavigation="true"  ID="from_date" name="from_date" runat="server" RenderMode="Lightweight" 
            Width="150px" ToolTip="" Height="40px">
            <DateInput ID="fd_input" DateFormat="MM/yyyy" runat="server" Enabled="true">
            </DateInput>
            </telerik:RadMonthYearPicker>
            <asp:RequiredFieldValidator runat="server" id="v_from_date" ControlToValidate="from_date" ErrorMessage="- Required" CssClass="validator" />
            <asp:RegularExpressionValidator ID="reg_v_from_date" runat="server" ErrorMessage="Invalid From Date" ControlToValidate="from_date" Text="Format: MM/YYYY" ValidationExpression="^\d{4}-\d{2}-\d{2}$" CssClass="validator"></asp:RegularExpressionValidator>

 

 

1 comment
ADMIN
Eric R | Senior Technical Support Engineer
Posted on: 05 Apr 2021 20:36

Hi Matthew,

Thank you for providing the feature request. As promised during our support exchange, I will provide a custom workaround that can help with the current limitations.

Custom Workaround

If allowing typed input is required, the best option would be to use custom validation on the client-side to check on which input type is used and then validate the input value.

This is because the PopUp will return a Date object and typing in the DateInput will return a string. See the following code snippet for a reference with comments. 

<script type="text/javascript">
    function OnValueChanging(sender, args) {
        // Validate the "newValue" using Regex or any other means.
        // If this is valid it will return a date object type
        // When valid just fall through and let it select. 
        var inputValue = args.get_newValue();
        // Assume is true for input value from popup
        var ValidDateType = inputValue instanceof Date;

        // If it's an invalid date type
        if (ValidDateType == false) {
            // Validate against REGEX
            var IsValidDate = new RegExp('^((0[1-9])|(1[0-2]))\/(\d{4})$\/gm').test(inputValue);

            // 
            if (IsValidDate === false) {
                // Cancel the event (optional) 
                // This will revert the value
                //args.set_cancel(true);

                // Set invalid flag for the control
                sender.set_invalid(true);

                // Implement some more lines of code that will handle additional tasks
                DisplayVadlidity(true, inputValue);
            } else {
                DisplayVadlidity(false);
            }
        } else {
            DisplayVadlidity(false);
        }
    }

    function DisplayVadlidity(bool, dateValue) {
        if (bool) {
            var lbl = document.getElementById('<%= Label1.ClientID %>');
            lbl.innerText = "The value \"" + dateValue + "\" has an incorrect format.\nValue must have the format of \"MM/yyyy\".";
        } else {
            var lbl = document.getElementById('<%= Label1.ClientID %>');
            lbl.innerText = "";
        }
    }
</script>
<div>
    <telerik:RadMonthYearPicker EnableAriaSupport="true" EnableKeyboardNavigation="true" ID="from_date"
        runat="server"
        Width="150px" ToolTip="" Height="40px">
        <DateInput ID="fd_input" DateFormat="MM/yyyy" runat="server" Enabled="true">
            <ClientEvents OnValueChanging="OnValueChanging" />

        </DateInput>
    </telerik:RadMonthYearPicker>
    <br />
    <asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
</div>

Alternatively, it is also possible to disable typed input by setting the EnableTyping property to false. However, this may not be useful for accessibility standards. 

Wrapping Up

Please let me know if you need any additional information. Thank you for choosing UI for ASP.NET AJAX.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.