Javascript验证在c#中不工作(错误消息)

Javascript Validation not working in C# (Error message)

本文关键字：错误 消息 工作 验证 Javascript      更新时间：2023-09-26

下面是javascript验证代码:

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>

文本框:

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

问题是验证不能正常工作。错误信息显示我有问题。请告诉我如何做多个文本框和下拉，以及如何使用javascript验证?

先生，您需要这样的东西吗?正如Abhay所说，有很多插件可以使用，jquery只是一个javascript库。

<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>
相关文章：