Making ASP label visible in Javascript?

Question

This is my label i want to display if the user have left out field before clicking the button. What am i doing wrong because nothing is happening when I click the button...

<asp:Label ID="lblError" runat="server" 
Text="* Please complete all mandatory fields" style="display: none;" >
</asp:Label>

This is my function i call when i click on the button

function valSubmit(){
    varName = document.form1.txtName.value;
    varSurname = document.form1.txtSurname.value;

    if (varName == "" || varSurname == "") 
    {
     document.getElementById('lblError').style.display = 'inherit'; 

    }
    else
    { 

     .................other code go here...........................
    return true; 
    } 

}

Answer 1

Why not use the Validation controls? These will give you client and server side validation out of the box - not that I'm lazy or anything... ;-)

Edit for comment:

The RequiredFieldValidator can be set to display a single red asterisk by the side of each control, and a validation summary control could be used BUT that would take up space.

So, it's possible that ASP.Net is renaming your control, so your JS should read:

document.getElementById('<%= lblError.ClientID %>').style.display = 'inherit';

Give that a go...

Personally, I'd still use the Validator controls ;-)

Answer 2

You shouldn't be using lblError as an ID in javacript code. Instead you should use:

'<%= lblError.ClientID %>'

Of course this is only possible if you are generating the javascript code in the asp.net file.

Answer 3

Take a look at jquery, you can select by classes instead of id's which will never be altered when rendered onto the page (unlike id's)

Answer 4

on your desired event use this

document.getElementById('<%= lblError.ClientID %>').style.display = ""; or
document.getElementById('<%= lblError.ClientID %>').style.display = "block"

ok then try this, instead of client side, make it serverside. First set it invisible like , on formload event set invisible using lblEror.visible = false and remove style ="display:none" from html. Then on the desired event/s make it visible and after processing again invisible.

If you want it strictly thorugh js.try this workaround. remove style from asp label. on body onload make it disable from some js function. now on the btn click event make it visible using the method something like this

    function Validate()
    {
         var objLbl = $get('<%=lblError.ClientID%>');
         if (validations fails)
         {
             objLbl.style.display = ""; //displays label
             return false;
         }
         else
         {
             objLbl.style.display="none" //hides label
             return true;
         }
    }
<asp:button id="btnValidate" runat="server" onclientclick="return validate();"/>

Hope this will work