Restricting User Entry Using JavaScript and Reg Expressions

Introduction

With the introduction of regular expressions, the client script has been made very easy to validate for valid entries in Web forms. To make the controls smarter than letting the user type the values and then displaying the error on submit event, this code will help restrict the entry to match any specified reg expressions.

Declaring the Page Controls

By using the JavaScript below, any input box on the page can be made to accept only valid input as defined by any regular expressions. To do that, there needs to be a hidden input declared in the page. The same hidden control can be used to validate any number of controls in the page. If Web controls are used, add the attribute for the keypress and propertychanged events for the controls.

JavaScript Code

function keypress(cntrl)
{
   var cntrl1 = document.getElementById("hiddencontrol");
   cntrl1.value = cntrl.value;
}

function propertychanged(cntrl)
{
   var reg = /^\d+\.?\d{0,4}$/;
   var val = cntrl.value;
   var cntrl1 = document.getElementById("hiddencontrol");
   var val1 = cntrl1.value;
   if (val.length > 0)
   {
      if (!reg.test(val))
      {
         cntrl.value = val1;
      }
   }
   else
   {
      cntrl1.value = "";
   }
}

Code Explanation

The keypressed function should be called on the key press event of the control that has to accept the valid entry. Pass this control to the function. On the key press event, the value that is in the control that needs to be validated is saved in the hidden control (named hiddencontrol). The value in the control will be one character less than the value that is in the control being validated (after the key up event is fired). The propertychanged function event will be fired following the keypress event for the control. Set the attribute for the control that's being validated to call these two functions. On the property changed event, the function above validates for valid four-digit decimal numbers. Otherwise, it will be set the value of the control to the previously saved value in the hidden control.

By changing the regular expression as per business needs, any control on the form can be made to accept only a valid entry when the user types in the value. Actually, you let the user type in any value (not restricting) and then compare with the regular expression. If it doesn't match, you reset the value in the control to the last known valid value from the hidden control.

Conclusion

I hope this code would be useful for developers who need to do some client validation on the user data entry with little modification as per the business needs.



About the Author

Ezhilan Muniswaran

Over 12 years of experience in Software Development with Microsoft Technologies and Products. Microsoft Certified Solutions Developer MCSD in .NET and Visual Studio 6.0

Comments

  • What are some Erectile Dysfunction treatments?

    Posted by aceeffifielm on 06/21/2013 01:58am

    Are there ways to help erect dysfunction? I will tell you what I know from personal experience [url=http://rxhealth.pw ] does viagra always work yahoo [/url] find additional Home treatment since erectile dysfunction

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: May 6, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT While you likely have very good reasons for remaining on WinXP after end of support -- an estimated 20-30% of worldwide devices still are -- the bottom line is your security risk is now significant. In the absence of security patches, attackers will certainly turn their attention to this new opportunity. Join Lumension Vice President Paul Zimski in this one-hour webcast to discuss risk and, more importantly, 5 pragmatic risk mitigation techniques …

  • Live Event Date: April 29, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Leveraging Flash storage to accelerate an Oracle Real Application Clusters (RAC) environment is one of today's hottest technology topics. Oracle databases require guaranteed levels of storage performance and high availability of data. Until recently, Oracle RAC could only use Flash storage for SmartFlash Cache, which addresses some performance improvements, but limits the benefits that can be gained from a shared Flash infrastructure. Enter …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds