jquery - 使用 jquery 显示表单错误

Question

当用户输入错误时，希望在表单右侧显示所有错误。例如，如果用户输入了错误的电子邮件格式。我已经创建了 div，但我无法正确显示错误并在用户更正输入后立即将其删除。到目前为止，我只是使用错误 ID 突出显示文本框。

jQuery：

    var form = $("#contact_form");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var message = $("#message");
var messageInfo = $("#messageInfo");
var note = $("#note");

name.blur(validateName);
email.blur(validateEmail);
message.blur(validateMessage);


form.submit(function(){
    if(validateName() & validateEmail() & validateMessage()){
        return true;
    }else{
        return false;
    }
});


function validateName(){
    if(name.val().length < 5){  
        name.addClass("error");
        return false;

    }else{

        name.removeClass("error");
        return true;

    }

}

Answer 1

我建议您使用插件而不是创建自己的...

jquery 验证插件

您在表单中想要的所有东西都已经完成......易于使用和修改......

Answer 2

你可以这样使用..

function validateName(){
    if(name.val().length < 5){  
        $("#nameError").html("Name should contain atleast 5 characters");
        name.addClass("error");
        return false;

    }else{
        $("#nameError").html("");
        name.removeClass("error");
        return true;

    }

}

nameError 是您为显示错误而创建的 DIV 的 ID。

在名称字段 keyDown 事件上，只需像这样清除错误消息..

$("#nameError").html("");