Restricting data entered in input box using client-side scripting

Introduction

With Regular expressions, client-side script has been made very easy to validate entries in web forms. To make controls more smarter than letting the user type in values and then displaying an error on the submit event, this code will help restrict the entry to match specified Regular Expressions.

Declaring the Page Controls

By using the JavaScript below, any input box in a page can be made to accept only valid input as defined by a Regular Expression. To do that, we need to have a hidden value 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, then 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 function keypress 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 that is being validated (after the key up event is fired).

The function propertychanged 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 the four valid digit decimal numbers. Otherwise, it will 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 a valid entry when the user types in a value.

Actually, we let the user type in any value (not restricting) and then compare with the Regular Expression, and if doesn't match, then 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 client-side validation on user data entry, with little modifications, and as per business needs.