Getting client-side goodness and allowing for HTML5 input type

[mortman]

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!

[Viktor Tachev]

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:

• RadTextBox Basics

Regards,
Viktor Tachev
Telerik

 

 

[mortman]

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.

[Viktor Tachev]

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