Using jQuery allowing Only Alphanumeric Characters in a Textbox

Requirement

Need to restrict the users by entering other than Alphanumeric Characters, if any user enters Non- Alphanumeric Characters then need to trim those Characters and display a message beside the respective textbox saying only Alphanumeric Characters are allowed…

 

Solution:

We have many solutions but using jQuery is the best way to achieve, with this we can use more flexible and reliable Regular expression technology with jQuery to achieve the above requirement.

 

Script Code:

 
 $(function () {

            $("#span_txtFirstName").hide();

            $("[id*='txtFirstName']").keyup(function () {

                $("#span_txtFirstName").hide();

                if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
                    $("#span_txtFirstName").toggle(500);
                }
            });

HTML Code:

 
<asp:TextBox ID="txtFirstName" runat="server" Width="200px" CssClass="styled_input"></asp:TextBox>
<span id="span_txtFirstName" class="RegistrationNumericDiv">oops! Only AlphaNumberic Charecters are Accepted.</span>

Explanation:

In the above HTML Code is the normal code as I used asp.Net TextBox control to present this demo, but we can use any technology here as our browser parser can understand only HTML tags so every technology has their own parser to parse their respective language code to HTML code. Next line we have a SPAN tag which is used to hold the message to the user whenever user types a non-alphanumeric character in the respective textbox and this SPAN tag hide/show will be handled in the given jQuery code itself.

As we can see we use the regular expression to validate each character enter by the user and if anything wrong we replace those character(s) with empty string (‘’) and we show the message by toggling the  SPAN tag..

That’s it we are done with our requirement J

Thank you

Happy Coding J

Explaining briefly about OOP

The world can be considered to consist of many objects. Objects will have attributes and behaviors. A water-heater is a simple example of an object. It has certain attributes or properties (like color, size, maximum and current temperatures etc.) and there are certain behaviors associated with the water-heater (like switching on the heater, increasing the temperature or heating for a specified time interval, switching off the heater etc.). These are actions that can be performed on the heater. Or in other words they are actions which can modify certain properties of the heater (for instance by switching on the heater the current temperature of the heater will change).

A car is another example of an object. It has a lot of attributes such as fuel capacity, current speed, top speed, number of wheels, type of gearbox etc. There are also a lot of operations which you can perform on this object. For example: you can accelerate the car, apply brakes etc. The attributes of a car will have some values at any given instance of time. Once the car is in motion, you can say that at a particular time the speed of the car is 30 km/hr (thus current speed will be 30km/hr). Similarly, the color of the car is red or the car has four wheels. The values for the attributes at any given instant of time define the state of the object. There are two types of states an object can have: static and dynamic. Some attributes of the car will not change over a period of time. The number of wheels in the car is always going to be four (unless you are making a new prototype!). The color of the car would also remain the same for a long time. These attributes contribute to the static state of the car. The current speed of the car is a dynamic property which will change frequently depending on the actions performed upon the car. In OO terminology you will encounter the following terms frequently:

• State
• Behavior
• Identity

Behavior of an object refers to the set of operations (or actions) that can be performed on an object.

Every object will have some attribute that can be used to uniquely identify the object. For example let’s take the example of a car as an object. All cars have color as an attribute. But can you distinguish two cars based on their colors? Definitely not. But you can distinguish two cars based on their registration number. Hence registration number is the attribute which can be used to uniquely identify a car. If you take a banking example then the account number is a unique way to identify an account (no two accounts can have the same account number).

An object will have two parts:

1. Interface
2. Implementation

In a car, the interface is the acceleration and braking actions which can be performed on the car (there are many more but lets just limit ourselves to these two actions). The driver is going to be the user of the car. When the driver presses the accelerator pedal, there are a lot of things that happen within the car which actually cause the rpm (rotations per minute of the wheel) to increase. Is the driver concerned about what actually happens within the engine? No. The driver just wants the car to accelerate on pressing the pedal and is least bothered about the underlying mechanisms used by the manufacturers to achieve this. He doesn’t care about how the engine is designed or as to how the piston is moving to achieve acceleration. All he knows (and wants to know generally) is that the car should accelerate when he presses the pedal. These internal mechanisms are called implementation details in OOP terminology. One of the central features of OOP is to separate the interface from the implementation. The person using an object should not know/worry about the implementation. This is what is termed encapsulation.

Hope it Helps you in understanding OOPs….

Happy Coding 🙂