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: May 18, 2015 While the idea of using facial and/or gesture recognition to create a modern, intuitive game seems attractive, some developers may want to leverage Unity 3D as a way to accelerate their development efforts. There are many different ways in which Intel and Unity Technologies have been working together to help speed the development of games with the Intel&reag; RealSense™ SDK (software developer kit). Check out this webcast to join a panel of experts as they …

  • Relying on outside companies to manage your network and server environments for your business and applications to meet the needs and demands of your users can be stressful. This is especially true as many Managed Hosting organizations fail to meet their service level agreements. Read this Forrester total economic impact report and learn what makes INetU different and how they exceed their customers' managed hosting expectations.

Most Popular Programming Stories

More for Developers

RSS Feeds

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