具有“成功”外观的jQuery验证组

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

我在同一页上有两个表单，所以我使用验证组小提琴：http://fiddle.jshell.net/N5BYk/5/

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

1. 无论何时出现错误，都需要更改标签的颜色（电子邮件/密码）
2. 填写正确的输入后，文本框边框将变为绿色。（已完成此css，名为"hassuccess"）

HTML:

<form id="form1" runat="server">
    <div class="validationGroup form-group">
        <label for="Username">Email:</label>
        <input type="text" id="Username" class="required email form-control" value="" />
        <label for="Password">Password:</label>
        <input type="password" id="Password" class="required form-control" value="" />
        <button id="login" class="causesValidation">submit</button>
    </div>
    <br/>
    <br/>
    <br/>
    <div class="validationGroup form-group">
        <label for="Username">Name:</label>
        <input type="text" id="FirstName" class="required form-control" value="" />
        <button id="Order" class="causesValidation">submit</button>
    </div>
</form>

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;
}

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