Using RegEx and Required with RadInputManager

[Theo van den Broek]

Hello,

I am using RadInputManager to do client-side form validation. I used a similiar setup as described in this blog post:

http://blogs.telerik.com/toddanglin/posts/08-12-12/Showing_RadToolTip_on_RadInput_input_error.aspx

I can't seem to find a way to make both validating on RegExpTextBoxSetting and field required work. What happens is that the OnError event is fired, but the textbox doesn't receive a proper "RadInput_error_default" class. On fields which only have a "TextBoxSetting Validation-IsRequired="true"" validator set, this class is set to indicate a invalid input. This only seems to happen on submit, not on blur of the textfield.

This is the (simplified) code I am using:

<telerik:RadInputManager ID="inpManager" runat="server">
        <telerik:TextBoxSetting Validation-IsRequired="true" >
            <TargetControls>
                <telerik:TargetInput ControlID="txtName" />
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:RegExpTextBoxSetting ErrorMessage="email" ValidationExpression="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
            <ClientEvents OnError="onClientRegTxtError" OnKeyPress="onClientTextChanged" />
            <Validation IsRequired="true" ValidateOnEvent="All" />
            <TargetControls>
                <telerik:TargetInput ControlID="txtEmail" />
                <telerik:TargetInput ControlID="txtReceiptEmail" />
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
    </telerik:RadInputManager>

So, to recap, what's happening is that the validater does seem to work, but doesn't show visual feedback by providing the proper CSS class. So when I press the Submit button, only the Input's which aren't using RegExp are highlighted as errorous.

Also, another question, when using the tooltips as suggested by the blog post, the error message is shown double. Both in the inputbox itself, and in the tooltip. I've currently "solved" this by saving the ErrorMessage property and setting it to "", It there a more elegant way to do this?

Thanks in advance for any suggestions.

[Rosen]

Hi,

Unfortunately I'm unable to re-create the behavior in question. I have attached a simple test project, please take a look, maybe I'm missing something obvious.  

Best wishes,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Theo van den Broek]

Thank you for your response. I was using 2008 Q3 version, I've upgraded to the latest now and don't have this problem anymore.

Any idea's on the other question?

When using the tooltips as suggested by the blog post, the error message is shown double. Both in the inputbox itself, and in the tooltip. I've currently "solved" this by saving the ErrorMessage property and setting it to "", It there a more elegant way to do this?

You can notice this behaviour in the example you made too.

[Rosen]

Hello,

You may still use the ErrorMessage property to set tooltip's message. However you can set it to empty string inside the javascript function after that and thus preventing it to be shown inside the textbox.

//Handles RegEx input errors (fires on blur if input is invalid)
            function onClientRegTxtError(sender, args) {
                //Get DOM reference to textbox
                var eleId = args.get_targetInput().get_id();
                var ele = $get(eleId);

                //Get error message from control
                var errMsg = sender.get_errorMessage();
                sender.set_errorMessage("");
                //Handle missing error message
                if (errMsg == null || errMsg == "")
                    errMsg = "Invalid entry";

                //Show error message
                showErrorTip(ele, errMsg);
            }

Regards,
Rosen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.