Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • A numeric only text box in web application

    • 0
    • 2
    • 2
    • 1
    • 0
    • 0
    • 0
    • 0
    • 313
    Comment on it

    A lot many times when creating web applications it so happens that we need to accept numeric vales i.e. which accepts positive, negative numbers , whole numbers or decimal numbers. Its easy, show a message on the page that the particular field needs to be filled with numbers only. But lets think from the end user's perspective, while entering the number instead of 0(zero) 'o' is pressed or instead of '.' (dot) ','(comma) is pressed. So your web form accepts this data and we continue but at some time in the application we need to do some maths on this data then what ? This 'o' and ',' will throw exceptions.
    So the next question is what should be done in such a case? There are many options available and we need to decide what is best, based on what type application we are catering to.

    A web-application provides us check at two points client side and server side.

    Check at client side

    The optimised approach says to check at the client side first before hitting the server. This is easily achievable through javascript/jquery checks.

    Lets a have simple form with two fields :

    • A textbox to accept the value to be checked
    • A button to submit the form

    So the html will look something like :

     <form method="post" id="form1">
            <input name="TextBox1" type="text" id="TextBox1" />
            <input type="submit" name="Button1" value="Button" id="Button1" />
    </form>
    

    We have many check points available on client side depending on what stage we want to apply this check.

    • At form submission.
    • When the textbox in question looses focus.
    • As soon as value changes in the concerned textbox.
    • Any other event that can be captured on client side.

    In all the client side checks the simplest available is the following code snippet to be written on event :

         if (!($("#TextBox1").val().match(/^-\d*\.{0,1}\d*$/) || $("#TextBox1").val().match(/^\d*\.{0,1}\d*$/)))
          {
                // Action to be performed on error           
           }
    

    The regex expressions in the above allows both positive and negative numbers as well as decimal numbers. But please remember to include jQuery library before this code snippet. At many places you will come across the suggestion that it should be written on keypress event, to disable non-numeric entry altogether. But there is catch here, what if the user copy and pastes the value. At that instance the keypress event will not be fired. So the check should also be applied on focusout event The code snippet will look something like :

    $("#TextBox1")
       .focusout(function () {
           if (!($("#TextBox1").val().match(/^-\d*\.{0,1}\d*$/) || $("#TextBox1").val().match(/^\d*\.{0,1}\d*$/)))
          {
               // Action to be performed on error  
           }
       })
       

    Check at server side

    To maintain the data integrity we need to insure that the checks are applied at server side also. This is to rule out the check failure at client side due to any reason like, the end user disables JavaScript.
    The following code snippet will help you
                string negativePattern = "-\\d*\\.{0,1}\\d*$";
                string poistivePattern = "^\\d*\\.{0,1}\\d*$";
                string textboxValue =TextBox1.Text;
                if (!(Regex.IsMatch(textboxValue, negativePattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase) || Regex.IsMatch(textboxValue, poistivePattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase)))
                {
                    //Action to be performed
                } 
    

    Don't forget to add using System.Text.RegularExpressions; in your cs file.
    After looking at the above snippet lot of you will think when we are expecting numbers in text then why storing the value as string. The answer is that then we can use another approach and handle it by catching the FormatException

                try
                {
                    double textboxValue = Convert.ToDouble(TextBox1.Text);
                }
                catch(FormatException ex)
                {
                    //Action to be performed
                }
    

    Please remember in Windows application the methods/solution will be different as they don't have client side checks and even the events provided on the controls are different. Will explain that in next blog.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: