Question

我在jquery.validate中使用bootstrap。

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

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

每当出现错误时，也需要更改标签的颜色（电子邮件/密码）。
填写正确的输入后，文本框边框变为绿色。（已经完成了这个css，称为“已成功＆＃39;”

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

Answer 1

插件的属性为“validClass”。你可以在那里设置成功类名。

http://fiddle.jshell.net/N5BYk/10/

具有Has-Success外观的jQuery验证组

1 个答案: