jQuery 减少验证代码中的迭代

Question

我编写了一个应用程序，允许用户输入他们的个人和付款详细信息。

我对大多数字段进行了大量验证检查，以确保它们不是空白的，并希望在未来引入其他检查(例如，仅数值，无特殊字符)。

我查看我的 jQuery 代码，似乎我已经使用 if else 以冗长的方式处理它。这是我使用字段示例的 jQuery 代码:

$(document).ready(function () {

$(".submitForm").click(function () {

    if ($("#Firstname").val() == '') {
        $("#Firstname").addClass("highlight");
    } else {
        $("#Firstname").removeClass("highlight");
    }

    if ($("#Surname").val() == '') {
        $("#Surname").addClass("highlight");
    } else {
        $("#Surname").removeClass("highlight");
    }

    if ($("#email").val() == '') {
        $("#email").addClass("highlight");
    } else {
        $("#email").removeClass("highlight");
    }

    if ($("#confirmemail").val() == '') {
        $("#confirmemail").addClass("highlight");
    } else {
        $("#confirmemail").removeClass("highlight");
    }

    ......
    ......

    $("#PersonalDetailsRequired").removeClass("visuallyhidden ");
    //document.forms[0].submit();
});
});

有没有更有效的写法？

这是我的 jFiddle:http://jsfiddle.net/oampz/G3ccb/5/

此外，PersonalDetailsRequired 似乎总是出现，即使所有字段中都有值也是如此。

谢谢

更新:

在这里上传了一个新的 fiddle - http://jsfiddle.net/oampz/P9eKZ/1/

我想要做的是让#PersonalDetailsRequired 和#AddressDetailsRequired 仅在它们各自的字段未填写时显示..

谢谢

Answer 1

试试这段代码:

DEMO

$(document).ready(function () {
    $(".submitForm").click(function () {
        $("input").each(function(){
            if($(this).val() == '')
            $(this).addClass("highlight");
            else 
            $(this).removeClass("highlight");       
        $("#PersonalDetailsRequired").removeClass("visuallyhidden ");
        //document.forms[0].submit();
        });
    });
});