显示错误消息的必填字段验证 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17759308/
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
Required field validation jquery showing error message
提问by PoliDev
I validated some fields in my form.. But i have some issues..If without enter fields it shows error message.. If fill out the field still error message is showing..
我验证了表单中的一些字段.. 但我有一些问题.. 如果没有输入字段，它会显示错误消息.. 如果填写该字段仍然显示错误消息..
How to put that ?
怎么说呢？
My code
我的代码
$("#Name").focus();
$("#Name").blur(function(){
var name=$('#Name').val();
if(name.length == 0){
$('#Name').after('<div class="red">Name is Required</div>');
}
else {
return true;
}
});
$("#Address").blur(function(){
var address=$('#Address').val();
if(address.length == 0){
$('#Address').after('<div class="red">Address is Required</div>');
return false;
}
else {
return true;
}
});
can anyone help me please?????
有人可以帮我吗？？？？
采纳答案by frogatto
You should remove this labels after that user input some data
在用户输入一些数据后，您应该删除此标签
$("#Name").focus();
$("#Name").blur(function(){
var name=$('#Name').val();
if(name.length == 0){
$('#Name').after('<div class="red">Name is Required</div>');
}
else {
$('#Name').next(".red").remove(); // *** this line have been added ***
return true;
}
});
$("#Address").blur(function(){
var address=$('#Address').val();
if(address.length == 0){
$('#Address').after('<div class="red">Address is Required</div>');
return false;
}
else {
$('#Address').next(".red").remove(); // *** this line have been added ***
return true;
}
});
jsfiddle: DEMO
jsfiddle：演示
回答by Lucas Willems
Try this code (I just changed the structure and added return false) :
试试这个代码（我只是改变了结构并添加了 return false）：
$("#Name").focus()
$("#Name, #Address").blur(function(){
if($(this).val().length == 0){
$(this).after('<div class="red">This field is required</div>');
} else {
$(this).next('.red').remove()
}
});
But I think the best way is to add the required attributeto your fields like this :
但我认为最好的方法是将required 属性添加到您的字段中，如下所示：
<input type="text" name="name" required />
<input type="text" name="address" required />
回答by Tushar Gupta - curioustushar
Your code has bug that it places div as many as time as you blur in empty textbox. This bug is also removed by my code See-:
您的代码有一个错误，它放置 div 的时间与您在空文本框中模糊的时间一样多。这个错误也被我的代码删除了见-：
Working Demo http://jsfiddle.net/XqXNT/
工作演示http://jsfiddle.net/XqXNT/
$(document).ready(function () {
$("#Name").focus();
$("#Name").blur(function () {
var name = $('#Name').val();
if (name.length == 0) {
$('#Name').next('div.red').remove();
$('#Name').after('<div class="red">Name is Required</div>');
} else {
$(this).next('div.red').remove();
return true;
}
});
$("#Address").blur(function () {
var address = $('#Address').val();
if (address.length == 0) {
$('#Address').next('div.red').remove();
$('#Address').after('<div class="red">Address is Required</div>');
return false;
} else {
$('#Address').next('div.red').remove();
return true;
}
});
});
It's better if you use required attribute which does the same work with less code and better manner.
最好使用 required 属性，它以更少的代码和更好的方式完成相同的工作。
HTML5
HTML5
<input type="text" name="name" required />
<input type="text" name="address" required />
回答by Suresh Atta
Try to remove the added html in elsecondition.
尝试在else条件中删除添加的 html 。
if(name.length == 0){
$('#Name').after('<div class="red">Name is Required</div>');
}
else {
$('.red').empty(); //here
return true;
}
And the same for $("#Address")
同样对于 $("#Address")
