Question

I’m wondering if anyone else has experienced the following issue.

On a single non-linked (to a master page) .aspx page, I’m performing simple JS validations:

   function validateMaxTrans(sender, args) {
        // requires at least one digit, numeric only characters
        var error = true;
        var regexp = new RegExp("^[0-9]{1,40}(\.[0-9]{1,2})?$");
        var txtAmount = document.getElementById('TxtMaxTransAmount');
        if (txtAmount.value.match(regexp) && parseInt(txtAmount.value) >= 30) {
            document.getElementById('maxTransValMsg').innerHTML = ""
            args.IsValid = true;
        }
        else {
            document.getElementById('maxTransValMsg').innerHTML = "*";
            args.IsValid = false;
        }
    }

Then as soon as I move this into a Master page’s content page, I get txtAmount is null.

Is there a different way to access the DOM when attempting to perform client-side JS validation with master/content pages?

Answer 1

Look at the source for your rendered page within the master page. Many elements will have an ID like ControlX$SubControlY$txtMaxTransAmount … you’ll need to adjust your validation accordingly. I will often just inject the IDs into the client doc..

<script type="text/javascript">
var controls = {
  'txtAmount': '<%=TxtMaxTransAmount.ClientId%>',
  ...
}
</script>

I’d put this right before the end of your content area, to make sure the controls are rendered already. This way you can simply use window.controls.txtAmount to reference the server-side control’s tag id. You could even make the right-side value a document.getElementById(‘…’) directly.