This is a migrated thread and some comments may be shown as answers.

RadButton & jQuery.validate()

1 Answer 153 Views
Button
This is a migrated thread and some comments may be shown as answers.
Chaz
Top achievements
Rank 1
Chaz asked on 30 Jan 2013, 07:56 PM
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);
        }
    });
});

1 Answer, 1 is accepted

Sort by
0
Chaz
Top achievements
Rank 1
answered on 31 Jan 2013, 10:34 PM
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);
}
});
}
Tags
Button
Asked by
Chaz
Top achievements
Rank 1
Answers by
Chaz
Top achievements
Rank 1
Share this question
or