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: March 19, 2015 @ 1:00 p.m. ET / 10:00 a.m. PT The 2015 Enterprise Mobile Application Survey asked 250 mobility professionals what their biggest mobile challenges are, how many employees they are equipping with mobile apps, and their methods for driving value with mobility. Join Dan Woods, Editor and CTO of CITO Research, and Alan Murray, SVP of Products at Apperian, as they break down the results of this survey and discuss how enterprises are using mobile application management and private …

  • According to technology research firm Gartner, cloud computing will become the bulk of new IT spend by 20161. By the end of 2017, Gartner predicts that nearly half of large enterprises will have hybrid cloud deployments1. Learn how you can use these trends to your advantage by offering cloud and hybrid data solutions to your customers.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date