Javascript 如何使input.error在所有字段上工作？

我正在使用这个脚本，它将输入字段中的详细信息发送到我的电子邮件。如您所见，存在input.error，如果输入不正确，它将以红色突出显示字段。但是，这目前仅适用于字段1和字段4

我怎样才能在第二场和第三场也做到这一点

<form id="contact" name="contact" action="#" method="post">
<div class="form-group">
    <label for="msg">Field1:

    </label>
    <input name="msg" type="msg" class="form-control" id="msg">
</div>
<div class="form-group">
    <label for="id">Field2:</label>
    <input name="id" type="msg" class="form-control" id="msg">
</div>
<div class="form-group">
    <label for="pb">Field3:

    </label>
    <input name="pb" type="msg" class="form-control" id="pb">
</div>
<div class="form-group">
    <label for="email">Field4:</label>
    <input name="email" type="email" class="form-control" id="email">
</div>
<button id="send">Submit</button>

字段1：
字段2：
字段3：
字段4：
提交

---

向这些输入字段添加minlength属性

<input name="msg" type="msg" class="form-control msg" id="msg" minlength="2">

然后

功能验证电子邮件（电子邮件）{
变量reg=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.]；
返回注册测试（电子邮件）；
}
$（文档）.ready（函数（）{
//$（“.modalbox”）.fancybox（）；
$（“#联系人”）。提交（函数（）{
返回false；
});
$（“#发送”）。在（“单击”上，函数（）{
$（'#contact input.error'）.removeClass（'error'）；
var emailval=$（“#email”）.val（）；
var mailvalid=validateEmail（emailval）；
if（mailvalid==false）{
$（“#email”）.addClass（“错误”）；
}
var minlen=$（'#联系人输入[minlength]'）。筛选器（函数（）{
返回this.value.length<+$（this.attr（'minlength'））
}).addClass（'error'）。长度；
if（mailvalid==true&&minlen==0）{
//如果两者都有效，我们将尝试发送电子邮件
//首先，我们隐藏提交btn，这样用户就不会点击两次
$（“#发送”）。替换为（“发送，请稍候…”；
$.ajax({
键入：“POST”，
url:'send.php'，
数据：$（“#联系人”）.serialize（），
数据类型：“jsonp”，
成功：功能（数据）{
如果（data.result==true）{
$（“#触点”）。淡出（“快速”，功能（）{
$（此）。在此之前（“
谢谢，您的邮件已发送。我们将很快与您联系。”；
});
}否则{/*如果要处理邮件发送失败，请将其放在此处*/
}
},
错误：函数（jqXHR、textStatus、errorshown）{
//如果从服务器取回jsonp时出现问题，则会触发此操作
}
});
}
});
});

---

演示：

输入1和2具有相同的id@Alex是的，我想加上这个，看看是否有帮助，但没有。如果它们具有不同的ID，则不起作用。您没有对这些字段应用任何验证。你想要什么验证你的脚本没有验证那些字段，那怎么会有错误？！您希望对这些字段应用什么验证谢谢。您还知道我如何用“用户选择答案”替换字段1，并在选择答案时将其发送到电子邮件。@user3187469您能编辑小提琴以重新创建所需内容吗

function validateEmail(email) {
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
}

$(document).ready(function () {
    //$(".modalbox").fancybox();
    $("#contact").submit(function () {
        return false;
    });


    $("#send").on("click", function () {
        $('#contact input.error').removeClass('error');

        var emailval = $("#email").val();
        var mailvalid = validateEmail(emailval);
        if (mailvalid == false) {
            $("#email").addClass("error");
        }

        var minlen = $('#contact input[minlength]').filter(function(){
            return this.value.length < +$(this).attr('minlength')
        }).addClass('error').length;

        if (mailvalid == true && minlen == 0) {
            // if both validate we attempt to send the e-mail
            // first we hide the submit btn so the user doesnt click twice
            $("#send").replaceWith("<p><strong>Sending, please wait...</strong></p>");

            $.ajax({
                type: 'POST',
                url: 'send.php',
                data: $("#contact").serialize(),
                dataType: 'jsonp',
                success: function (data) {
                    if (data.result == true) {
                        $("#contact").fadeOut("fast", function () {
                            $(this).before("<p class='success'><strong>Thank you, your message has been sent. We will be in touch shortly.</strong></p>");
                        });
                    } else { /* if you want to handle mail send failed, put it here */
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // this is triggered if there's a problem getting the jsonp back from the server
                }
            });
        }
    });
});