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: March 19, 2015 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 app stores to …

  • Finance leaders have been talking about expanding the value-added role of their teams for a long time. The debate is no longer whether the finance and accounting function needs to become a more strategic partner to the rest of the business but rather how to get there. Technology innovation has caught up to this ambition, and what was once aspiration can be a reality – and the choice is now yours. Read this research report to learn how to make the most of information tools to enable innovation and growth.

Most Popular Programming Stories

More for Developers

RSS Feeds

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