Question

I wrote a simple javascript function for validating to fields in a aspx page

function validate()

{
 if (document.getElementById("<%=tbName.ClientID%>").value=="")
  {
             alert("Name Feild can not be blank");
             document.getElementById("<%=tbName.ClientID%>").focus();
             return false;
  }
  if (document.getElementById("<%=ddlBranch.ClientID%>").value=="SelectBranch")
  {
             alert("Branch Should Be Selected");
             document.getElementById("<%=ddlBranch.ClientID%>").focus();
             return false;
  }

}

Everything worked fine.
Later I linked it to aspx page like a external js file.

head runat=”server”>

script src=”validation.js” type=”text/javascript”>

/script>

<title>Validations</title>

/head>

<form id="form" runat="server">



<asp:Label ID="lblName" runat="server" Text="Nmae: ">/asp:Label>
<asp:TextBox ID="tbName" runat="server" Width="130px">/asp:TextBox>

<asp:Label ID="lblBranch" runat="server" Text="Branch:">/asp:Label>
    <asp:DropDownList ID="ddlBranch" runat="server" Width="107px">
        <asp:ListItem>CSE</asp:ListItem>
        <asp:ListItem>ECE</asp:ListItem>
        <asp:ListItem>CIVIL</asp:ListItem>
        <asp:ListItem>MECH</asp:ListItem>
        <asp:ListItem Selected="True" Value="SelectBranch">SelectBranch</asp:ListItem>
    </asp:DropDownList>    
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return validate(<%=tbName.ClientID%>, <%=ddlBranch.ClientID%>)" />

</form> 

and

In aspx.cs page

protected void Page_Load(object sender, EventArgs e)

{
    Page.RegisterClientScriptBlock("MyScript", "<SCRIPT Language='JavaScript' src='validation.js'></SCRIPT>"); 
    btnSubmit.Attributes.Add("onclick", "return validate()");

}

Now its giving error “Microsoft JScript runtime error: Object required”.

I’m unable to know where I went wrong.

Answer 1

Your script can only run inside the aspx page as it is. <%=tbName.ClientID%> is server-side logic it’s placing the literal client-side ID in the output to the client, so before it looked like this when rendered in the HTML:

document.getElementById("tbName")
//looks for <input id="tbName" />

Now it looks just like this:

document.getElementById("<%=tbName.ClientID%>")
//looks for <input id="<%=tbName.ClientID%>" /> ... doesn't exist :)

Since it’s no longer finding an object/element (because that ID doesn’t exist) you’re getting the object required error. You have to either keep this logic in the page, or move to some other approach using classes, etc. If you’re doing a lot of validation, I’d take a look at jQuery and the validation library.

---

Update: Here’s the solution T.J. provided for you in comments in full text form for an easier read. If you’re only validating a few fields, this is the simplest fix to your situation:

function validate(nameId, branchId) {
  if (document.getElementById(nameId).value=="")
  {
             alert("Name Feild can not be blank");
             document.getElementById(nameId).focus();
             return false;
  }
  if (document.getElementById(branchId).value=="SelectBranch")
  {
             alert("Branch Should Be Selected");
             document.getElementById(branchId).focus();
             return false;
  }
}

In your code-behind:

//Note your current method is deprecated after .Net 2.0+, should use this instead:
//ClientScript.RegisterClientScriptInclude("validation", "validation.js");
Page.RegisterClientScriptBlock("MyScript", "<script type='text/javascript' src='validation.js'></script>"); 
btnSubmit.Attributes.Add("onclick", string.Format("return validate('{0}','{1}')", tbName.ClientID, ddlBranch.ClientID));