locked
Validation of XAML TextBox Input in VB RRS feed

  • Question

  • Hi all,

    I need to make sure that users of my app enter only numbers of a certain range in a TextBox. Is is advisable to use the  TextChanged event for this and if so, how can I identify in the event handler what the user typed in?

    Any suggestions would be greatly appreciated.

    Tuesday, August 13, 2013 9:44 PM

Answers

  • You can check in either the TextBox.TextChanged event or the TextBox.LostFocus event, or leave it for a commit control.

    If you just want to display an error cue such as an error border or explanatory text next to the TextBox then TextChanged is a good place. If you want to do something stronger such as changing the entered data then wait at least until LostFocus or better just diable the ability to commit.

    Don't punish your users for half entering a number, moving away, and then coming back to finish it.

    --Rob

    Tuesday, August 13, 2013 10:27 PM
    Moderator

All replies

  • You can check in either the TextBox.TextChanged event or the TextBox.LostFocus event, or leave it for a commit control.

    If you just want to display an error cue such as an error border or explanatory text next to the TextBox then TextChanged is a good place. If you want to do something stronger such as changing the entered data then wait at least until LostFocus or better just diable the ability to commit.

    Don't punish your users for half entering a number, moving away, and then coming back to finish it.

    --Rob

    Tuesday, August 13, 2013 10:27 PM
    Moderator
  • Hi Rob,

    thanks for your quick reply. I not only want to restrict the input into a  certain TextBox to only numbers but also to  numbers in a certain range. My error message should read like "only numbers between 10 and 100 are allowed for input in this field". So how can I read the number that was input by the user in my eventhandler for the TextChanged event?

    Tuesday, August 13, 2013 11:21 PM
  • Here's some quick sample code. I'd refactor it for generality, animate the error's opacity rather than just changing the visibility, etc. before using it, but it'll give you a general idea of what you can do:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBox Grid.Row="0" Grid.Column="0" TextChanged="TextBox_TextChanged"/>
            <TextBlock Grid.Row="0" Grid.Column="1" x:Name="validationText" Visibility="Collapsed" Text="Number must be between 1 and 100" />
            <Button Grid.Row="1" Grid.Column="0" x:Name="commitButton" Click="Button_Click" IsEnabled="False" >Commit</Button>
        </Grid>
            private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
            {
                TextBox origin = sender as TextBox;
                if (origin != null)
                {
                    bool isValid = false;
                    try
                    {
                        int number = Int32.Parse(origin.Text);
    
                        if (number >= 1 && number <= 100)
                        {
                            isValid = true;
                        }
                    }
                    catch (FormatException)
                    {
                        // We'll get a FormatException if the TextBox doesn't contain a number.
                        // isValid is already initialized to false;
                    }
                    if (isValid)
                    {
                        origin.BorderBrush = validBrush;
                        commitButton.IsEnabled = true;
                        validationText.Visibility = Visibility.Collapsed;
                    }
                    else
                    {
                        origin.BorderBrush = invalidBrush;
                        commitButton.IsEnabled = false;
                        validationText.Visibility = Visibility.Visible;
                    }
                }
            }

    --Rob
    Tuesday, August 13, 2013 11:59 PM
    Moderator
  • Hi ,

    You can also use Callisto Framework , which is a Free Framework and contains a numeric control which does all the job for you.

    Have a look at here

    https://github.com/timheuer/callisto

    And you can add it to your solution using nuget manager.

    You will have something like this in your XAML for example

     <callisto:NumericUpDown x:Name="Size" Text="{Binding Size}" Maximum="99999999.999" TextChanged="Size_TextChanged" FontSize="18" TextAlignment="Right" Increment="10" Height="30" Width="192"  AcceptsReturn="False"  Background="White"  Value="0.000" DecimalPlaces="3"   />

    thank you

    • Edited by zakkar Wednesday, August 14, 2013 4:39 AM
    Wednesday, August 14, 2013 4:36 AM
  • Hello jumpingjack,

    You can use regex in your application.

    Thursday, August 22, 2013 1:13 PM