jQuery表单验证 - 一次报告所有错误

时间:2012-11-07 19:04:16

标签: javascript jquery validation

我一直在搞这样的验证大约一年了:

$(document).ready(function(){


    $('#contact-form').submit(function(){
        var name = $('#inputnimi').val(),
            email = $('#inputemail').val(),
            message = $('#inputmessage').val();

            var nameerror = "<h4>Puuttuva kenttä</h4>",
            emailerror = "<h4>Puuttuva kenttä</h4>",
            messageerror= "<h4>Puuttuva kenttä</h4>";

            if(name == ""){
                $('.message-console').html(nameerror);
                return false;
            }

            if(email == ""){
                $('.message-console').html(emailerror);
                return false;
            }

            if(message == ""){
                $('.message-console').html(messageerror);
                return false;
            }
            $.ajax({
            type: "POST",
            url: "contact.php",
            data:  form-data,
            dataType: "text",
            error: function(){alert("ERROR");

            },
            success: function() {
                alert("success");
            }


            });
            return false;



    });
});

但是,我不喜欢这个,因为:

  • 它逐个检查错误,这对长表格来说很烦人
  • 我知道有更好的方法可以做到这一点

我想知道如何在一次点击中验证所有字段,而我能想到的就是这样的事情,这种事情无处不在:

if(name||email||message == ""){
$('.message-console').html(errors);
return false;
}

所以我想验证表单没有任何插件,并立即显示所有错误,如果有的话。但是如何?

2 个答案:

答案 0 :(得分:0)

您可以尝试这样的事情:

if(!(name&&email&&message))
{
    //error logic
}

但是,如果任何值等于 0 ,则会再次触发验证,因此您最好使用

if((name&&email&&message)=="")
{
    //error logic
}

答案 1 :(得分:0)

每次都不要让它返回假。然后你可以有类似的东西:

$('.message-console').html('');

if(name == ""){
  $('.message-console').append(nameerror);
 }
 /*others*/

虽然我做了dnagirl建议并使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/的内容 - 就额外的插件而言它并没有那么糟糕而且它很容易使用。