javascript 使用 jquery 验证文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15728583/
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
Validate text box using jquery
提问by Rinshad Hameed
I have several asp text box inside my aspx page. And there is no enough space to show Requred field validator messages. Is there any solution to this? using jquery or something else?
我的 aspx 页面中有几个 asp 文本框。并且没有足够的空间来显示 Requred 字段验证器消息。有什么解决办法吗？使用 jquery 还是别的什么？
回答by pala?н
You can simply highlight the text-box with Redborder to mark that their is an issue with the text-box data.
您可以简单地突出显示带Red边框的文本框以标记它们是文本框数据的问题。
You can use CSS like this:
你可以像这样使用 CSS：
input.error
{
background: Yellow; border: 1px solid red;
}
On error, just add the class to the inputand also input tooltip
出现错误时，只需将类添加到input并输入工具提示
$("input").addClass("error").attr('title', 'An error occurred!');
回答by Santosh
Try below code :
试试下面的代码：
$(":text").each(function(){
if($(this).val()==""){
$(this).css("background-color","red");
alert($(this).attr("id") & " validate error");
return
}
});
回答by canhnm
You can use both javascript or jQuery, by validate data and then turn back your message in to the input if it is not validated. ex:
您可以使用 javascript 或 jQuery，通过验证数据，然后在未验证的情况下将您的消息返回到输入中。前任：
if($('#idOfFeild').val()==''){
$('#idOfFeild').val('Please input your data');
}
You can add style too to warn your users!
您也可以添加样式来警告您的用户！
回答by Francois Borgies
You can read this article :http://www.codeproject.com/Articles/43772/Generic-Code-of-Validating-Fields-with-Jqueryand them try this code :
你可以阅读这篇文章：http: //www.codeproject.com/Articles/43772/Generic-Code-of-Validating-Fields-with-Jquery，他们试试这个代码：
<script type="text/javascript">
<script src="JavaScript/jquery.js" type="text/javascript"></script>
function callOnload()
{
$("input[isvalidate=true]").each(
function(n)
{
$('#' +this.id).addClass('mandatory');
this.onkeyup=function()
{
if(this.value==='')
{
$('#' +this.id).removeClass('normal');
$('#' +this.id).addClass('mandatory');
}
else
{
$('#' +this.id).removeClass('mandatory');
$('#' +this.id).addClass('normal');
}
}
}
);
$("#btnSubmit").click(
function()
{
$("input[isvalidate=true]").each(
function(n)
{
if(this.value==='')
{
alert($('#' +this.id).attr('errprMsg'));
}
}
);
return false;
}
);
}
$(document).ready(callOnload);
</script>
回答by Code Rider
Yes obviously, you have a very simple solution.
是的，显然，您有一个非常简单的解决方案。
you don't have to use any jquery stuff. you just have to use asp:validationSummary.
你不必使用任何 jquery 的东西。你只需要使用asp:validationSummary.
I'm posting here solution. with this you can show all error messages in simple popup by using standard asp validation controls. It won't consume any space on your page.
我在这里发布解决方案。有了这个，您可以使用标准 asp 在简单的弹出窗口中显示所有错误消息validation controls。它不会占用您的任何空间page。
Have a look on code below:
看看下面的代码：
<asp:ValidationSummary ID="validation1" runat="server" ShowMessageBox="true" ShowSummary="false" DisplayMode="SingleParagraph" ValidationGroup="abc" />
<asp:TextBox ID="txtAge" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="req" runat="server" ControlToValidate="txtAge" Display="None" ValidationGroup="abc" ErrorMessage="Field Required"></asp:RequiredFieldValidator>
<asp:Button ID="btn" Text="click" runat="server" ValidationGroup="abc" />
Here i have set ShowMessageBox="true"in Validation Summary, which will show all error messages in popup.
在这里，我设置ShowMessageBox="true"了Validation Summary，它将在弹出窗口中显示所有错误消息。
Set your validators Display="none", so that the error messages display only in the popup.
设置您的验证器Display="none"，以便错误消息仅显示在弹出窗口中。
the error message will look like below image. You don't have to worry about to manage space of page.
错误消息将如下图所示。您不必担心管理页面空间。
It is perfect , easy and simple solution for your problem.
它是您问题的完美、简单和简单的解决方案。
Let me know, if it works for you.
请让我知道这对你有没有用。
回答by Kamil
Alternativly to alert() you can use your own validator and color text or textbox. I have got small example on my page and you can adapt it. Add css class: http://kjinit.blogspot.com/2013/03/jquery-dynamic-adding-css-class.htmland remove css class.
除了 alert()，您还可以使用自己的验证器和颜色文本或文本框。我的页面上有一个小例子，你可以修改它。添加 css 类：http: //kjinit.blogspot.com/2013/03/jquery-dynamic-adding-css-class.html并删除 css 类。
Of course first you need to validate it like this: if('#yourInputId').val(''); Just color your text adding or removing css class when it is correct or not.
当然首先你需要像这样验证它： if('#yourInputId').val(''); 只需在文本正确与否时为添加或删除 css 类的文本着色。
