Mr. Manoj Kumar Mr. Manoj Kumar - 3 months ago 17
C# Question

Javascript Validation not working in C# (Error message)

Here is the javascript validation code:

if (document.getElementById("<%=txtCategoryName.ClientID %>").value.trim() == "") {
document.getElementById("<%=dvMessage.ClientID %>").innerHTML = "Please enter Category.";

document.getElementById("<%=txtCategoryName.ClientID %>").focus();

document.getElementById("<%=txtCategoryName.ClientID %>").classList.add("ErrorControl");
// document.getElementById("<%=txtCategoryName.ClientID %>").style.outline = '1px solid red';
// document.getElmentById("<%=txtCategoryName.ClientID %>").style.border = '3px solid red';
return false;

}
if (document.getElementById("<%=txtCategoryDescription.ClientID %>").value.trim() == "") {
document.getElementById("<%=dvMsg.ClientID %>").innerHTML = "Please enter Category Description.";
document.getElementById("<%=txtCategoryDescription.ClientID %>").focus();
document.getElementById("<%=txtCategoryDescription.ClientID %>").classList.add("ErrorControl");
// document.getElementById("<%=txtCategoryDescription.ClientID %>").style.outline = '1px solid red';
return false;
}
}

<script>
function checkfunction(val) {
if (val != "") {

document.getElementById("<%=txtCategoryName.ClientID %>").classList.remove("ErrorControl");
// document.getElementById("<%=dvMessage.ClientID %>").style.display = 'none';
document.getElementById("<%=txtCategoryDescription.ClientID %>").classList.remove("ErrorControl");
// document.getElementById("<%=dvMsg.ClientID %>").style.display = 'none';
}
}
</script>


Here is the text box:

<div class="field">
<div id="dvMessage" runat="server" style="color: Red" >
</div>
<label>
Category Name <em>*</em>
</label>
<div>
<asp:TextBox ID="txtCategoryName" runat="server" CssClass="form-01-control" onkeyup="checkfunction(this.value)" placeholder="Enter Category Name" ></asp:TextBox>
</div>
<div id="dvMsg" runat="server" style="color: Red">
</div>
<label>
Category Description <em>*</em></label>
<div>
<asp:TextBox ID="txtCategoryDescription" runat="server" CssClass="form-01-control" onkeyup="checkfunction(this.value)" placeholder="Enter Category Description"></asp:TextBox>
</div>
<label>
Parent Category </label>
<div>
<asp:DropDownList ID="ddlParentCategory" runat="server" Width="250px" class="form-01-control">
</asp:DropDownList>
</div>
<label>
Category Image</label>
<div>
<asp:FileUpload ID="fuImage" runat="server" />
<asp:Image ID="imgCategory" Width="100" Height="100" runat="server" />
</div>
</div>


The problem is that validation not working properly. The ERROR MESSAGE shows I'm having a problem. Please tell me what to do for multiple textbox and dropdown and how to use javascript validation?

Answer

Sir, is something like this what you need? And as Abhay said, there's a load of plugins you can use, jquery is just a javascript library.

<script>
var catName = {
        'label' : document.getElementById("<%=dvMessage.ClientID %>"),
        'textbox' : document.getElementById("<%=txtCategoryName.ClientID %>")
    },
    catDesc = {
        'label' : document.getElementById("<%=dvMsg.ClientID %>"),
        'textbox' : document.getElementById("<%=txtCategoryDescription.ClientID %>")    
    },
    noText = function hasText( textbox ) {
        return textbox.value.trim().length === 0;
    };
// This entire part might be redundant, unless the textbox comes back from the server with text already inside it.
// If the textbox is always empty at startup, this part could be replaced by placing the text already into the div.
if (noText(catName.textbox)) {
    catName.label.innerHTML = "Please enter Category.";
    catName.textbox.focus()
    catName.textbox.classList.add("ErrorControl");
}
if (noText(catDesc.textbox)) {
    catDesc.label.innerHTML = "Please enter Category Description.";
    catDesc.textbox.focus()
    catDesc.textbox.classList.add("ErrorControl");
}

function checkfunction( textValue ) {
    var catNameCls = catName.textbox.classList,
        catDescCls = catDesc.textbox.classList;
    if (textValue.length !== 0) {
        if (catNameCls.contains("ErrorControl")) catNameCls.remove("ErrorControl");
        else catNameCls.add("ErrorControl");
        if (catDescCls.contains("ErrorControl")) catDescCls.remove("ErrorControl");
        else catDescCls.add("ErrorControl");        
    }
}
</script>