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;
    }
});

任何人都可以帮我吗?????

Answer 1

尝试此代码（我刚刚更改了结构并添加了返回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 attribute添加到您的字段中，如下所示：

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

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

Answer 3

您的代码存在错误，它将div放置在空文本框中模糊的时间。我的代码也删除了这个错误 - 见<：p>

工作演示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;
        }
    });

});

如果你使用必需的属性，用更少的代码和更好的方式做同样的工作，那就更好了。

<强> HTML5

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

Answer 4

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

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

$("#Address")

也一样

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

4 个答案: