RadDatePicker Validation for Non-Required Fields

[Gaurab]

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.

[Shinu]

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.

[Gaurab]

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.  :-)