必填字段验证jQuery显示错误消息

Question

我对表格中的某些字段进行了验证，但是遇到了一些问题。如果没有填写字段，它会显示错误信息。如果填写了字段，仍然会显示错误信息。

要如何解决这个问题？

我的代码：

 $("#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;
    }
});

有人能帮我吗？

这里是需要翻译的内容。

- PoliDev

---

什么类型的错误信息？ - Lucas Willems

Answer 1

尝试使用以下代码（我只是改变了结构并添加了“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()
    }
});

我认为最好的方法是像这样在你的字段中添加required属性：

<input type="text" name="name" required />
<input type="text" name="address" required />

- Lucas Willems

---

你的代码可能无法正确使用 $(this).next().remove()，这可能会导致字段 address 被删除。 - frogatto

是的，但我更新了我的代码。我加入了 $(this).next('.red').remove()。 - Lucas Willems

Answer 2

在用户输入数据之后，您应该删除这些标签。

$("#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

- frogatto

---

这段代码有一个错误。每次失去焦点时，它会重复弹出警告而不删除先前的警告。 - Menuka Ishan

Answer 3

你的代码存在一个bug，每当你在空文本框中失焦时，它就会放置多个div。

我的代码已经修复了这个问题，请看以下示例：

演示效果 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;
        }
    });

});

如果您使用required属性，可以用更少的代码更好地完成相同的工作。

HTML5

<input type="text" name="name" required />
<input type="text" name="address" required />

- Tushar Gupta - curioustushar

Answer 4

尝试在else条件中删除添加的HTML。

 if(name.length == 0){
        $('#Name').after('<div class="red">Name is Required</div>');
    }
    else {
    $('.red').empty(); //here
    return true;
    }

对于 $("#Address") 也是同样的情况

- Suresh Atta