使用jquery显示表单错误

时间:2013-01-02 10:26:23

标签: jquery html

当用户输入错误时,

希望在表单右侧显示所有错误。 用户输入错误电子邮件格式的示例。我创建了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;

    }

}

2 个答案:

答案 0 :(得分:2)

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

jquery validation plugin

您表单中所需的所有内容已经完成...易于使用和修改..

答案 1 :(得分:0)

你可以这样使用..

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