Javascript 和必填字段验证器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14339408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript and Required field validator
提问by user11340
I have a RequiredFieldValidator on a TextBox. This works fine when nothing is enterd in the TextBox. Now, one more validation I do is when the user enters some junk data, I throw an error-message saying "invalid entry". This is on the Label.
我在 TextBox 上有一个 RequiredFieldValidator。当 TextBox 中没有输入任何内容时，这可以正常工作。现在，我做的另一个验证是当用户输入一些垃圾数据时，我抛出一条错误消息，指出“无效输入”。这是在标签上。
Now the scenario is after the error-message is thrown, if the user empties the textbox and clicks on the button, the RequiredFieldValidator works but the error-message on the label still remains as it is. I would like to hide/remove it once the user empties the textbox.
现在的场景是在抛出错误消息之后，如果用户清空文本框并单击按钮，RequiredFieldValidator 可以工作，但标签上的错误消息仍然保持原样。一旦用户清空文本框，我想隐藏/删除它。
For this I used a JavaScript function but with this the RequiredFieldValidator does not work. Here's my code:
为此，我使用了一个 JavaScript 函数，但在此情况下，RequiredFieldValidator 不起作用。这是我的代码：
<asp:TextBox ID="txtemp" runat="server"></asp:TextBox>
<asp:Button ID="btnstatus" runat="server" ValidationGroup="valgrp1" OnClientClick="Validate()"
CausesValidation="true" onclick="btnstatus_Click"
Text="Fetch status message" BackColor="#ccebff" />
<asp:RequiredFieldValidator ID="Reqfield1" ControlToValidate="txtportalid" ValidationGroup="valgrp1" ErrorMessage="wrong entry" runat="server" />
</div>
<div>
<asp:Label ID="lblerrormsg" runat="server" Font-Bold="true" Visible="false" ForeColor="#FF3300">
</asp:Label>
</div>
JavaScript:
JavaScript：
function Validate()
{
var txt1 = document.getElementById("<%= Txtemp.ClientID %>");
var val1 = txt1.value.replace(/\s/g, "");
if (val1=="")
{
document.getElementById("<%= lblerrormsg.ClientID%>").style.display = 'none';
}
}
回答by volpav
I'd suggest using CustomValidatorwith ClientValidationFunctionproperty set to point to your Validatefunction like the following:
我建议使用CustomValidator并将ClientValidationFunction属性设置为指向您的Validate函数，如下所示：
<script>
function Validate(source, arguments) {
arguments.IsValid = /* your validation logic */
}
</script>
...
<asp:CustomValidator ControlToValidate="txtportalid"
ErrorMessage="..." ClientValidationFunction="Validate" runat="server" />
... or, in your case you can just use RegularExpressionValidator. Both will give you the behavior you're looking for.
...或者，在您的情况下，您可以只使用RegularExpressionValidator。两者都会给你你正在寻找的行为。
回答by Denys Wessels
You could handle the keyupevent for the textbox using jQuery.
您可以keyup使用jQuery处理文本框的事件。
The example below does two things:
下面的例子做了两件事：
- Everytime a keypress occurs on the textbox check whether the textbox is empty and
- Check whether the error label has a value
- 每次在文本框上发生按键时，检查文本框是否为空并
- 检查错误标签是否有值
If both the checks have passed, simply clear the error label!
如果两项检查都通过了，只需清除错误标签即可！
ASPX:
ASPX：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home</title>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtemp").keyup(function () {
if (!this.value) {
var errorMessage = $("#<%= lblErrorMessage.ClientID %>").length;
if (errorMessage) {
$("#<%= lblErrorMessage.ClientID %>").html("");
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtemp" runat="server" />
<asp:Button ID="btnstatus" runat="server" ValidationGroup="valgrp1" CausesValidation="true"
OnClick="btnstatus_Click" Text="Fetch status message" />
<asp:RequiredFieldValidator runat="server" ID="req" ValidationGroup="valgrp1" ControlToValidate="txtemp"
ErrorMessage="Field is required" />
<asp:Label ID="lblErrorMessage" ClientIDMode="Static" runat="server" EnableViewState="false" />
</div>
</form>
</body>
</html>
Code behind (I've just created a simple method for testing) :
代码隐藏（我刚刚创建了一个简单的测试方法）：
protected void btnstatus_Click(object sender, EventArgs e)
{
if (txtemp.Text == "invalid")
{
lblErrorMessage.Text = "The data is invalid";
}
}
