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>

Thank you for your answer; i checked, whenever onclick triggers i see " Uncaught TypeError: Cannot read property 'value' of null" in the relevant javascript function, Allthough the GetElementById function seems pretty fine... any insights? — A. Abramov
– A. Abramov, Commented Jan 15, 2015 at 17:56
@mason That actually was the key to solving my problem. Thanks :) — A. Abramov
– A. Abramov, Commented Jan 15, 2015 at 18:23

mason · Accepted Answer · 2015-01-15 18:43:53Z

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.

answered Jan 15, 2015 at 18:43

mason

32.8k12 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A. Abramov · Accepted Answer · 2015-01-15 18:22:11Z

0

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;
        }
    }

answered Jan 15, 2015 at 18:22

A. Abramov

1,8341 gold badge19 silver badges47 bronze badges

7 Comments

gbs Over a year ago

Just curious, why aren't you using jquery validate plugin. That would have made things more simple. Also using just jquery in your validator.js to select elements instead of getElementById would be better way.

mason Over a year ago

Better than hardcoding the prefix of the control (because that can change) you should change the ClientIdMode at the web.config level. Then the ID on the server side will match the ID on the client side.

A. Abramov Over a year ago

Im not sure how to do that, never actually touched the web.config file. If you'll show me ill make sure you get the 25 points you deserve. :)

mason Over a year ago

I'm curious why you unaccepted my answer and then accepted yours, despite the fact that my answer encompasses your solution and was up here first.

A. Abramov Over a year ago

@mason I'm unsure. I've been playing with the web.config for a while now and It just doesn't seem to fit ; in the context of this question, it mostly had to do with the master-page. I'll accept yours anyway.

|

Banana · Accepted Answer · 2015-01-17 13:44:54Z

0

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;

answered Jan 17, 2015 at 13:44

Banana

7,4843 gold badges25 silver badges44 bronze badges

Collectives™ on Stack Overflow

Using javascript from an ASP.NET textbox

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related