jump to navigation

Change Background Color of Invalid Controls (ASP.NET Validator) September 16, 2009

Posted by codinglifestyle in ASP.NET, CodeProject.
Tags: , , , ,

I was working with a customer who has invested a lot in redoing the validation in their web application.  I accedentially suggested wouldn’t it be nice if we could change the background or border of the field in question.  The customer loved this idea which meant I’d just created more work for myself.  After searching about I wasn’t finding this done for me, so I actually had to write some code instead of cutting and pasting.

If you set a breakpoint on WebForm_OnSubmit and step in you can check out the .NET validator script.  Key thing here is a global array called Page_Validators.  From here it is fairly trivial to test and change something about the control in question.

function fnOnUpdateValidators()


for (var i = 0; i < Page_Validators.length; i++)


var val = Page_Validators[i];

var ctrl = document.getElementById(val.controltovalidate);

if (ctrl != null && ctrl.style != null)


if (!val.isvalid)



ctrl.style.backgroundColor = “”;





Of course, one problem is if the control already had a background color, it would be lost.  This can be circumvented by storing the old value in an attribute or elsewhere.  Also, custom validators are a special case so you will need to add the appropriate changes for fields validated in a custom way.

To make sure my function is called I use the deprecated Page.RegisterOnSubmitStatement(“val”, “fnOnUpdateValidators();”).  This will call my function after the validators have fired so the isvalid is up to date.


Currency TextBox with Javascript April 24, 2009

Posted by codinglifestyle in Javascript.
Tags: , , , ,
1 comment so far

This took me a long time so here it is for prosperity.  I started by looking at Ajax’s masked edit field in order to enforce a simply currency field.  This was a waste of time and not up for the job.  I accomplished it with javascript instead.  Very simple, no symbols, just #####.## with the cents being optional. 

Here is the script:


**  Returns the caret (cursor) position of the specified text field.

**  Return value range is 0-oField.length.


function doGetCaretPosition(oField) {


    // Initialize

    var iCaretPos = 0;


    // IE Support

    if (document.selection) {


        // Set focus on the element



        // To get cursor position, get empty selection range

        var oSel = document.selection.createRange();


        // Move selection start to 0 position

        oSel.moveStart(‘character’, -oField.value.length);


        // The caret position is selection length

        iCaretPos = oSel.text.length;



    // Firefox support

    else if (oField.selectionStart || oField.selectionStart == ‘0’)

        iCaretPos = oField.selectionStart;


    // Return results

    return (iCaretPos);



function fnCurrencyOnly(o) {

    var sValue = o.value;

    var sKey = String.fromCharCode(window.event.keyCode);

    var range = document.selection.createRange();

    var pos = doGetCaretPosition(o);


    if (range.text == sValue) {

        sValue = sKey;

    } else {

        sValue = sValue.substr(0, pos) + sKey + sValue.substr(pos);


    var re = new RegExp(“^\\d+(?:(\\.|\\,)\\d{0,2})?$”);

    if (!sValue.match(re))

        window.event.returnValue = false;




        <input type=”text” onkeypress=”fnCurrencyOnly(this);” />



I’m sure sure who the original author is, but I found the script for doGetCaretPosition() here: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/


Numeric input only for a HtmlInputField January 12, 2006

Posted by codinglifestyle in ASP.NET, Javascript.
Tags: , ,
1 comment so far

Sometimes a validator control is overkill, especially when you are dynamically creating all your web controls and just want a simple restriction.  Below is a little javascript to require numeric input only:

HtmlInputField myField = new HtmlInputField();

myField.Attributes.Add(“onkeyup”, “this.value=this.value.replace(/[^\\d]*/gi,\”\”);”);