RadButton & jQuery.validate()

2 posts, 0 answers
  1. Chaz
    Chaz avatar
    6 posts
    Member since:
    Jan 2013

    Posted 30 Jan 2013 Link to this post

    I'm trying to use RadButton as a LinkButton and I'm validating the form using jQuery.validate().

    I have the RadButton control set up as a LinkButton and for Single Click.

    I'm having a problem where the validation runs and returns appropriate errors, but the button stays disabled.  I've tried various approaches to enable the button, with no luck.

    Anyone have a solution?

    Button markup:

    <telerik:RadButton ID="OrderButton" runat="server" Text="Order Check Copy" ButtonType="LinkButton" CssClass="css3Grad" ForeColor="White" SingleClick="True" OnClick="OrderButton_Click" BorderStyle="None" SingleClickText="Processing ..... " AutoPostBack="False" UseSubmitBehavior="False"></telerik:RadButton>

    jQuery for the button's click:

    $(document).ready(function ()
    {
        $('#<%= OrderButton.ClientID %>').click(function ()
        {
            $('#aspnetForm').validate({
            });
            $('#<%=accountNumber.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
            $('#<%=ckNumLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
            $('#<%=dateLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
            $('#<%=amountLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
            if ($('#aspnetForm').valid() == false) {
                var btn = $find('<%= OrderButton.ClientID %>');
                btn.set_enabled(true);
            }
        });
    });
  2. Chaz
    Chaz avatar
    6 posts
    Member since:
    Jan 2013

    Posted 31 Jan 2013 Link to this post

    I got this figured out.

    They key was to call validation via RadButton's OnClientClicking event and cancel form submission via set_cancel when the form is invalid.

    Button Code:

    <telerik:RadButton ID="OrderButton" runat="server" Text="Order Check Copy" CssClass="css3Grad" ButtonType="LinkButton" SingleClick="True" OnClientClicking="ValidateOrderForm" OnClick="OrderButton_Click" BorderStyle="Dotted" SingleClickText="Processing ..... " Font-Bold="True" ForeColor="White"></telerik:RadButton>

    Client Script:

    function ValidateOrderForm(sender, args) {
    $(document).ready(function () {
    $('#aspnetForm').validate({ errorClass: 'ValidateError' });
    $('#<%=accountNumber.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
    $('#<%=ckNumLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
    $('#<%=dateLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
    $('#<%=dateLabel.ClientID%>').rules('add', { date: true, messages: { date: ' Invalid Format' } });
    $('#<%=amountLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
    $('#<%=amountLabel.ClientID%>').rules('add', { number: true, messages: { number: ' Invalid Input' } });

    if ($('#aspnetForm').valid()) {
    args.set_cancel(false);
    } else {
    args.set_cancel(true);
    }
    });
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top