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

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

  • Today's agile organizations pose operations teams with a tremendous challenge: to deploy new releases to production immediately after development and testing is completed. To ensure that applications are deployed successfully, an automatic and transparent process is required. We refer to this process as Zero Touch Deployment™. This white paper reviews two approaches to Zero Touch Deployment--a script-based solution and a release automation platform. The article discusses how each can solve the key …

Most Popular Programming Stories

More for Developers

RSS Feeds