Using javascript from an ASP.NET textbox

Question

I am currently making an ASP.Net page as a part of a project; While making the main registration/Login page validators (Labels that change their visibility on javascript and trigger on the OnChange event of their recpective textboxes), I faced a problem. Allthough it worked perfectly fine in our computer labs (which means the javascript code itself is probably correct), the validators do not work at all - regardless of the input. Any idea why would it possibly happen?

Thank you!

Javascript:

function isUserValid() {
    var UserLength = document.getElementById("UserTB").value.length;
    var ValidatorLabel = document.getElementById("ValidateUser");
    if (UserLength < 6 || UserLength > 15) {
        ValidatorLabel.style.display = 'inline';
        return false;
        }
    else {
        ValidatorLabel.style.display = 'none';
        return true;
    }  
    }
function isPassValid() {
        var PassLength = document.getElementById("PasswordTB").value.length;
        var ValidatorLabel = document.getElementById("ValidatePassword");
        if (PassLength < 6 || PassLength > 15) {
            ValidatorLabel.style.display = 'inline';
            return false;
        }
        else {
            ValidatorLabel.style.display = 'none';
            return true;
        }
    }
function isConfirmValid() {
        var Password = document.getElementById("PasswordTB").value;
        var Me = document.getElementById("ConfirmTB").value;
        var ValidatorLabel = document.getElementById("ValidateConfirm");
        if (Password == Me) {
            ValidatorLabel.style.display = 'none';
            return true;
        }
        else {
            ValidatorLabel.style.display = 'inline';
            return false;
        }
    }
function isEmailValid() {
        var str = document.getElementById("EmailTB").value;
        var lastAtPos = str.lastIndexOf('@');
        var lastDotPos = str.lastIndexOf('.');
        var isFine = (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2);
        var ValidationLabel=document.getElementById("ValidateEmail");
        if(isFine)
        {
            ValidationLabel.style.display='none';
            return true;
        }
        else
        {
            ValidationLabel.style.display='inline';
            return false;
        }
    }

In the ASP:

<script src="Validators.js" type="text/javascript"></script>
....

ASP "validators":

Username:<br />
    <asp:TextBox ID="UserTB" runat="server" OnChange="return isUserValid();" AutoPostBack="false"></asp:TextBox>
    <asp:Label ID="ValidateUser" runat="server" ForeColor="Red"
        Text="Username must be 6-15 characters in length, and contain no special characters." CssClass="Validators"></asp:Label>
    <br /><br />
    Password:<br />
    <asp:TextBox ID="PasswordTB" runat="server" OnChange="return isPassValid();" AutoPostBack="false"></asp:TextBox>
    <asp:Label ID="ValidatePassword" runat="server" ForeColor="Red"
        Text="Password must be 6-15 characters in length, and contain no special characters." CssClass="Validators"></asp:Label>
    <br /><br />
    Confirm password:<br />
    <asp:TextBox ID="ConfirmTB" runat="server" OnChange="return isConfirmValid();" AutoPostBack="false"></asp:TextBox>
    <asp:Label ID="ValidateConfirm" runat="server" ForeColor="Red"
        Text="This field must match the password field." CssClass="Validators"></asp:Label>
    <br /><br />
    Email:<br />
    <asp:TextBox ID="EmailTB" runat="server" OnChange="return isEmailValid();" AutoPostBack="false"></asp:TextBox>
    <asp:Label ID="ValidateEmail" runat="server" ForeColor="Red" Text="Invalid Email." CssClass="Validators"></asp:Label>

Answer 1

<configuration>    
    <system.web>
        <pages clientIDMode="Static" />
    </system.web>
</configuration>

Change the Client ID Mode at the web.config level so that your ID's on the client side and the server side will be the same. Alternatively, set it at the Page or Control level through their respective attributes in your markup.

Answer 2

Oh come on. :)

Apperently it had to do with the page being a part of an ASP:Content placeholder tag, which represents the implentation of the master page content for each page.

As it seems, Content placeholders add their value to the ID of controls in them; Since mine was called PageContent, the solution was to change everything to PageContent_(Name of the actual control here).

Full solution : js:

function isUserValid() {
    var UserLength = document.getElementById("PageContent_UserTB").value.length;
    var ValidatorLabel = document.getElementById("PageContent_ValidateUser");
    if (UserLength < 6 || UserLength > 15) {
        ValidatorLabel.style.display = 'inline';
        return false;
        }
    else {
        ValidatorLabel.style.display = 'none';
        return true;
    }  
    }
function isPassValid() {
var PassLength = document.getElementById("PageContent_PasswordTB").value.length;
var ValidatorLabel = document.getElementById("PageContent_ValidatePassword");
        if (PassLength < 6 || PassLength > 15) {
            ValidatorLabel.style.display = 'inline';
            return false;
        }
        else {
            ValidatorLabel.style.display = 'none';
            return true;
        }
    }
function isConfirmValid() {
var Password = document.getElementById("PageContent_PasswordTB").value;
var Me = document.getElementById("PageContent_ConfirmTB").value;
var ValidatorLabel = document.getElementById("PageContent_ValidateConfirm");
        if (Password == Me) {
            ValidatorLabel.style.display = 'none';
            return true;
        }
        else {
            ValidatorLabel.style.display = 'inline';
            return false;
        }
    }
function isEmailValid() {
var str = document.getElementById("PageContent_EmailTB").value;
        var lastAtPos = str.lastIndexOf('@');
        var lastDotPos = str.lastIndexOf('.');
        var isFine = (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2);
        var ValidationLabel = document.getElementById("PageContent_ValidateEmail");
        if(isFine)
        {
            ValidationLabel.style.display='none';
            return true;
        }
        else
        {
            ValidationLabel.style.display='inline';
            return false;
        }
    }

Answer 3

instead of changing your web.config, you can just use a preprocessor directive to use the ID which is generated for clientside:

so instead of:

var Password = document.getElementById("PasswordTB").value;

you simply do this:

var Password = document.getElementById("<%=PasswordTB.ClientID%>").value;

the <%=PasswordTB.ClientID%> will be replaced by visual studio to the clientside id, something like contenttemplate1_blablabla_PasswordTB and when the page reaches the client, it will look like that:

var Password = document.getElementById("contenttemplate1_blablabla_PasswordTB").value;