Wizard html5 Validation not working

[Dev]

html5 validation "required" not working inside RadWizard.  But same is working in asp:Wizard. 

 Working     

 

<asp:Wizard ID="Wizard1" runat="server">
    <WizardSteps >
        <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
            <asp:TextBox ID="TextBox1"  required="" type="text" placeholder="Try it out." runat="server"></asp:TextBox>
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep2"  runat="server" Title="Step 2">
            <asp:TextBox ID="TextBox2"  required="" type="text" placeholder="Try it out." runat="server"></asp:TextBox>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

 

 

NOT WORKING

 

<telerik:RadWizard ID="ADSRadWizard" runat="server">

    <WizardSteps >

        <telerik:RadWizardStep ID="WizardStep3" runat="server" Title="Step 1">

            <telerik:RadTextBox ID="RadTextBox1" required="" type="text" placeholder="Try it out." runat="server"></telerik:RadTextBox>

        </telerik:RadWizardStep>

        <telerik:RadWizardStep ID="WizardStep4"  runat="server" Title="Step 2">

            <telerik:RadTextBox ID="RadTextBox2" required="" type="text" placeholder="Try it out."  runat="server"></telerik:RadTextBox>

        </telerik:RadWizardStep>

    </WizardSteps>

</telerik:RadWizard>

[Plamen]

Hi,

Thank you for contacting Telerik support.

By default RadWizard supports only client and server-side ASP.NET validation.The native HTML5 validation is only triggered when the submit button is used while unfortunately RadWizard does not render submit button and that is why the validation is not used. 

Hope this will explain the issue. If you have further questions please don't hesitate to contact us again.

Regards,
Plamen
Telerik

[Dev]

Hi

 Is there any workaround to achieve validation in User Controls used inside wizard steps?  The problem is we are using User Controls both in aspx page and inside wizard steps.  We fully rely on HTML5 validations, because of this telerik limitation, we need to use both HTML5 and Server-Side validation which is redundant. 

[Plamen]

Hello,

One possible way to use the HTML 5 validation with the current version of RadWizard is to use a custom button instead of the default navigation buttons. Here is a sample code that worked at my side:

<telerik:RadWizard ID="ADSRadWizard" runat="server" DisplayNavigationButtons="false">
    <WizardSteps >
        <telerik:RadWizardStep ID="WizardStep3" runat="server" Title="Step 1">
            <telerik:RadTextBox ID="RadTextBox1" required="" type="text" placeholder="Try it out." runat="server"></telerik:RadTextBox>
            <asp:Button runat="server" OnClick="Unnamed_Click" Text="Next" />
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep4"  runat="server" Title="Step 2" Enabled="false">
         next step
        </telerik:RadWizardStep>
    </WizardSteps>
</telerik:RadWizard>

protected void Unnamed_Click(object sender, EventArgs e)
   {
       WizardStep4.Enabled = true;
       ADSRadWizard.ActiveStepIndex = 1;
   }

Hope this will be helpful.

Regards,
Plamen
Telerik