RadDatePicker Validation for Non-Required Fields

3 posts, 0 answers
  1. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 21 Oct 2013 Link to this post

    There's a nice demo that shows how to prevent the user from submitting dates when they are invalid AND required.  What is the suggested method of preventing the user from submitting (clicking save) when the field is not required, but must be valid if it is filled in?

    I have seen some discussion but most are quite old and don't seem like very elegant solutions.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Oct 2013 Link to this post

    Hi Jon,

    Please have a look into the following code I tried for your scenario.

    ASPX:
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="RadTextBox1"
        ErrorMessage="*" ForeColor="Red" ValidationGroup="registergroup"></asp:RequiredFieldValidator>
    <br />
    <telerik:RadTextBox ID="RadTextBox2" runat="server">
    </telerik:RadTextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="RadTextBox2"
        ErrorMessage="*" ForeColor="Red" ValidationGroup="registergroup"></asp:RequiredFieldValidator>
    <br />
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <DateInput runat="server" ClientEvents-OnBlur="OnBlur">
        </DateInput>
        <Calendar runat="server" ClientEvents-OnDateSelected="OnDateSelected">
        </Calendar>
    </telerik:RadDatePicker>
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" OnClientClicking="OnClientClicking"
        Text="Save" OnClick="RadButton1_Click" ValidationGroup="registergroup">
    </telerik:RadButton>

    JavaScript:
    <script type="text/javascript">
        var invalidDate = false;
        function OnClientClicking(sender, args) {
            if (invalidDate == true) {
                args.set_cancel(true);
            }
        }
     
        function OnBlur(sender, args) {
            var dateinput = sender.get_textBoxValue();
            if (dateinput.length != 0) {
                if (isDate(dateinput)) {
                    invalidDate = false;
                }
                else {
                    invalidDate = true;
                }
            }
            else {
                invalidDate = false;
            }
        }
        function OnDateSelected() {
            invalidDate = false;
        }
     
        function isDate(txtDate) {
            //Declare Regex 
            var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
            var dtArray = txtDate.match(rxDatePattern); // is format OK?
     
            if (dtArray == null)
                return false;
     
            //Checks for mm/dd/yyyy format.
            dtMonth = dtArray[1];
            dtDay = dtArray[3];
            dtYear = dtArray[5];
     
            if (dtMonth < 1 || dtMonth > 12)
                return false;
            else if (dtDay < 1 || dtDay > 31)
                return false;
            else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
                return false;
            else if (dtMonth == 2) {
                var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
                if (dtDay > 29 || (dtDay == 29 && !isleap))
                    return false;
            }
            return true;
        }
     
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 22 Oct 2013 Link to this post

    Thanks Shinu.  That looks like a very valid approach.

    Because the RadDatePicker has a built in validator, and the DateInput has a ValidationGroup property and the RadButton has a ValidationGroup property, it seems like they should work together without additional code.  The RadDatePicker default validators validate with no additional code and validate whether they're a required field or not.  It just seems like it should all work without additional code.

    In my situation, I have several RadDatePickers and none are required.  Here's what I did to prevent the save button from submitting when there is an invalid value present.

    <telerik:RadButton runat="server" ID="rbSave" Text="Save" CommandName="Update" OnClientClicking="rbSave_ClientClicking"/>

    function rbSave_ClientClicking(sender, eventArgs)
    {
        var datePickers = DatePickers();
        for (var i = 0; i < datePickers.length; i++)
        {
            if (datePickers[i].get_dateInput()._holdsValidValue == false)
            {
                eventArgs.set_cancel(true);
                break;
            }
        }
    }
             
    function DatePickers()
    {
        var datePickers = new Array();
                 
        datePickers[0] = $find('<%= rdp1.ClientID %>');
        datePickers[1] = $find('<%= rdp2.ClientID %>');
        datePickers[2] = $find('<%= rdp3.ClientID %>');
        datePickers[3] = $find('<%= rdp4.ClientID %>');
        datePickers[4] = $find('<%= rdp5.ClientID %>');
        datePickers[5] = $find('<%= rdp6.ClientID %>');
        datePickers[6] = $find('<%= rdp7.ClientID %>');
     
        return datePickers;
    }

    It works well, but because Telerik is so nice and tries to do so much for us, I just thought there must be a better way.  :-)  
Back to Top