Validation for my ASP textboxes is not working using javascript and ASP.NET

Question

I just want to ask why my form validation for my asp textboxes is not working. It should be like when the user does not input a text in the textbox, a description in the paragraph tag will display to please input a text. But it is not working.Please help me on solving this.

Here is the javascript code:

function checkForm() {
var errors = [];

if ($("#itemBrand").value == "") {
    errors[0] = "Please input a text!";
}

if ($("#itemModel").value == "") {
    errors[1] = "Please input a text!";
}

if (errors.length > 0) {
    if (errors[0] != null) {
        document.getElementById("itemBrandValidate").innerHTML = errors[0];
    }

    if (errors[1] != null) {
        document.getElementById("itemModelValidate").innerHTML = errors[1];
    }
 return false;
}
return true;
}

And here is the aspx:

<asp:TextBox ID="itemBrand" runat="server" BackColor="#FFFF66" 
 BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
 </asp:TextBox><br />
                    <p  id="itemBrandValidate"></p>

 <asp:TextBox ID="itemModel" runat="server" BackColor="#FFFF66" 
 BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
 </asp:TextBox><br />
                    <p  id="itemModelValidate"></p>

 <asp:Button ID="Button1" runat="server" CssClass="submitButton" Text="Save 
  Item" OnClick="Button1_Click" OnClientClick="return checkForm()"/>

Answer 1

Add ClientIdMode = "Static" on your textboxes. Otherwise the .NET platform generates an Id which is not the same as the server ID property and your Jquery selector is not working as expected.

For example:

<asp:TextBox ID="itemBrand" ClientIDMode="static" runat="server" BackColor="#FFFF66" 
 BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
 </asp:TextBox>

Answer 2

Client side id of asp.net server controls is different from server side id.

You may use ClientIDMode = "Static" (introduced in .NET 4.0) or you might use ClientID as shown below , also I've tried to re-write your validation function a bit.

function checkForm() {
var success = true;

var itemBrandID = "<%= itemBrand.ClientID %>" ;  

if ($("#" + itemBrandID).value == "") {
    success = false;
    document.getElementById("<%= itemBrandValidate.ClientID %>").innerHTML = "Please input a text!";
}

var itemModelID = "<%= itemModel.ClientID %>" ;  
if ($("#" + itemModelID).value == "") {
    success = false;
    document.getElementById("<%= itemModelValidate.ClientID %>").innerHTML = "Please input a text!";
}


return success;
}

Also suggest you to read this excellent post by Rick Strahl on A generic way to find ASP.NET ClientIDs with jQuery

Hope this helps !