Javascript 具有成功外观的jQuery验证组

我将引导与jquery.validate一起使用

我在同一页上有两个表单，所以我使用验证组 小提琴：

组验证成功，但我需要对外观进行一些增强：

如果出现错误，也需要更改标签的颜色（电子邮件/密码）

填写正确的输入后，文本框边框变为绿色。（已完成此css，称为“已成功”）

HTML:

Javascript:

$(document).ready(function () {
    $("#form1").validate({
        onsubmit: false
    });

    $('.validationGroup .causesValidation').click(Validate);          
});

function Validate(evt) {
    var $group = $(this).parents('.validationGroup');
    var isValid = true;
    $group.find(':input').each(function (i, item) {
        if (!$(item).valid()) {
            $(this).closest('.validationGroup').addClass('has-error');
            isValid = false;
        }
    });

    if (!isValid) evt.preventDefault();
}

插件有一个属性“validClass”。您可以在那里设置成功类名

---

不需要在标签中添加Twitter BooStrap。请检查此网站，获取用于相同目的的正确文件，并为class“.valid”应用css。使用边框颜色：绿色

label {
    clear: both;
    float: left;
    line-height: 24px;
    margin-top: 10px;
    padding-right: 10px;
    text-align: right;
    width: 100px;
    vertical-align: middle;
}
label.error {
    clear: none;
    color: Red;
    float: left;
    padding-left: 10px;
    white-space: nowrap;
}

$(document).ready(function () {
    $("#form1").validate({
        onsubmit: false
    });

    $('.validationGroup .causesValidation').click(Validate);          
});

function Validate(evt) {
    var $group = $(this).parents('.validationGroup');
    var isValid = true;
    $group.find(':input').each(function (i, item) {
        if (!$(item).valid()) {
            $(this).closest('.validationGroup').addClass('has-error');
            isValid = false;
        }
    });

    if (!isValid) evt.preventDefault();
}