-1

I am validating a textbox (specifically, a Telerik RadTextBox, but I don't think that is the problem). I've tried both RequiredFieldValidator and CustomValidator. When I press Tab, validation works fine, and it looks like the cursor goes to the next control. However, it takes an additional click for the next control to get focus. That is awkward on a page with multiple textboxes.

I think the problem has something to do with validation consuming the click, which prevents focus from moving to the next control.

How can I implement textbox validation such that tabbing or clicking out of the control both validates and focuses on the next control as expected?

This is C# webforms.

<telerik:RadTextBox ID="txtMyTextbox" runat="server" AutoPostBack="true"
    RenderMode="Lightweight" style="max-width:none;" Resize="None" Width="330px"  
    TextMode="MultiLine" Rows="2" cols="66" class="TextAreaClass" >
</telerik:RadTextBox>
<asp:CustomValidator ID="valMyTextbox" runat="server" 
    OnServerValidate="Validate_txtMyTextbox_SS" 
    ValidationGroup="vgPage04" ValidateEmptyText="True" 
    Display="Static" CssClass="cssRF_splat" 
    Text="*" ErrorMessage="How Did Incident Occur">
</asp:CustomValidator>

on both IsPostBack and !IsPostBack, Page_Load calls Page.Validate();

protected void Validate_txtMyTextbox_SS(object source, ServerValidateEventArgs args)
{
    args.IsValid = !string.IsNullOrWhiteSpace(txtMyTextbox.Text);
}

Thanks!

3
  • Is there any post-back occurring here, or is this 100% client side validation? If the page has (does) a post-back, then without question you lose the current location. Commented Jul 15 at 23:09
  • What have you tried so far? See also: How to create a Minimal, Reproducible Example . Commented Jul 16 at 0:42
  • Edited to add code sample. Commented Jul 18 at 1:40

1 Answer 1

0

You can implement textbox validation such that tabbing or clicking out of the text control both validates and focuses on the next control as expected using client-side-only validation. In order to do that, remove OnServerValidate from your CustomValidator and add the ClientValidationFunction instead.

The problem with focus happens with OnServerValidate because when you Tab, the focus does go to the next control, but then the page is reloaded in order to execute your server side validation method. Reloading the page resets the focus.

With ClientValidationFunction instead of OnServerValidate, your page should not be reloaded when you leave the text input, so the focus should behave as expected.

You need to add the implementation of the client-side JavaScript function. Place this function within a <script> block in your .aspx page or in an external JavaScript file linked to the page. For example, to add function validateMyTextbox in your .aspx page.

<asp:CustomValidator ID="valMyTextbox" runat="server" 
    ClientValidationFunction="validateMyTextbox" 
    ValidationGroup="vgPage04" ValidateEmptyText="True" 
    Display="Static" CssClass="cssRF_splat" 
    Text="*" ErrorMessage="How Did Incident Occur">
</asp:CustomValidator>

    <script type="text/javascript">
        function validateMyTextbox(source, arguments) {
            // Get the value of the control to validate
            var valueToValidate = arguments.Value;

            // Implement your custom validation logic
            if (valueToValidate.length < 5) { // Example: require at least 5 characters
                arguments.IsValid = false; // Set IsValid to false if validation fails
            } else {
                arguments.IsValid = true; // Set IsValid to true if validation passes
            }
        }
    </script>

You still need to validate your input on the server side before processing it further, because client side validation alone does not prevent someone from sending invalid POST request to your server.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.