Getting client-side goodness and allowing for HTML5 input type

4 posts, 0 answers
  1. mortman
    mortman avatar
    5 posts
    Member since:
    Jun 2006

    Posted 03 Jul 2014 Link to this post

    Hi - I apologize if this has been answered elsewhere, but I couldn't find it anywhere. Our application uses a number of different rad input types (masked text box, numeric text box, date text box, etc), which has been great for client-side validation and formatting (in the case of the masked text box) . Now we are trying to make those devices work with HTML5 input types, and that's become a stumbling block. I found this page: http://www.telerik.com/products/aspnet-ajax/input.aspx which discusses some of what I was looking for, like numeric text boxes and HTML5 input types, but not together. I've searched for this topic, and not found anything super new. Most things are older and they say that the RadNumericTextbox does not support HTML5, which was surprising to me. I'm hoping that I've just missed the way to do this, and someone can steer me in the right direction. Otherwise it sounds like I'm probably stuck using RadTextbox controls, and something like JQuery to do the client-side validation and formatting. Am I just missing something?

    Thanks in advance!
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 08 Jul 2014 Link to this post

    Hi,

    The RadTextBox supports different HTML5 input types. In order to use this functionality you need to set the InputType property of the control. Please check out the following article, that lists the HTML5 input types that could be used with the control:



    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mortman
    mortman avatar
    5 posts
    Member since:
    Jun 2006

    Posted 08 Jul 2014 in reply to Viktor Tachev Link to this post

    Hi, and thanks for the reply! I did see that the regular RadTextBox supports this, but it doesn't appear that the RadNumericTextBox or the RadMaskedTextBox does. Or does the RadNumericTextBox inherently have an HTML5 type of "number"?

    Basically we love the format and validation done with those two types of boxes, but we also need for the boxes to bring up the right keyboard on a user's phone or tablet. For example, we are using the RadMaskedTextBox for phone numbers, to format the input, but we would like to have it also pop up the numeric keyboard on a user's phone or tablet.
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 11 Jul 2014 Link to this post

    Hi,

    The Number InputType is not available for the RadNumericTextBox because the browser features and validation would overlap with the custom ones defined for the control.

    In order to achieve similar functionality you could try the following approach. Add a RadTextBox control with InputType set to Number. Also place a Validator control on the page. For example a CustomValidator or a RegularExpressionValidator.

    Check out the sample markup below:

    <telerik:RadTextBox runat="server" ID="RadTextBox1" InputType="Number"></telerik:RadTextBox>
    <asp:CustomValidator ErrorMessage="errormessage" ControlToValidate="RadTextBox1" runat="server" ValidateEmptyText="true" ClientValidationFunction="clientValidate" />
     
    <asp:Button Text="click" runat="server" />

    JavaScript:

    function clientValidate(sender, args) {
        if (args.Value == "") {
            var textBox = $find("<%= RadTextBox1.ClientID %>");
     
            textBox.set_invalid(true);
            args.IsValid = false;
        }
    }

    Similar approach could be implemented for entering a phone number. You could set the InputType of a RadTextBox to "Tel".


    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top