jQuery 验证插件将成功类添加到另一个元素

Question

我正在使用 jQuery 验证插件。

如何将成功类添加到另一个元素？

如果我输入正确的电子邮件地址，我想为 div.field 分配一个类 - 这可以使用 jQuery 验证插件吗？

jsfiddle.net/zidski/qcrhk/

HTML:

<form id="registration" method="get">
    <fieldset>
        <legend>Registration Details</legend>
        <div class="field">
            <label for="email">Email<em>*</em>

            </label>
            <input type="text" name="email" id="email" class="required email" />
        </div>
        <div class="field">
            <label for="confirm_email">Confirm email<em>*</em>

            </label>
            <input type="text" name="confirm_email" id="confirm_email" class="required email" />
        </div>
        <div class="password">
            <div class="field">
                <label for="password">Password<em>*</em>

                </label>
                <input type="password" name="password" id="password" class="required password min-length_6" />
            </div>
            <div class="field">
                <label for="confirm_password">Confirm<em>*</em>

                </label>
                <input type="password" name="confirm_password" id="confirm_password" class="confirmation-of_password" title="Please enter the exact same password" />
            </div>
        </div>
    </fieldset>

JavaScript:

var formActions = {};


// Form initialisation
formActions.init = function () {
    // Validate For Registration
    $('#registration').validate({
        rules: {
            email: "required",
            confirm_email: {
                required: true,

                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            }
        },
        messages: {
            email: {
                required: "Please enter a valid email address."
            },
            confirm_email: {
                required: "Please enter a valid email address.",


            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            }
        }
    });

};

$(formActions.init);

CSS:

/* Form styles 
------------------------------------------*/
 form {
}
legend {
    font-size:1.4em;
    font-weight:bold;
    padding:0 10px;
}
.field {
    overflow: auto;
    padding: 5px 10px 10px 10px;
}
.field.terms, .field.terms label {
    width:auto;
}
.field.terms input {
    width:16px;
    float:left;
}
label, .checkbox p, .radio p {
    padding: 0.2em 0 0;
    display:block;
    font-size:1.2em;
}
form label {
    font-size:1.2em;
    margin:0 0 5px 0;
}
form label em {
    color:red;
    font-style:normal;
}
input, select {
    width: 250px;
    clear:both;
}
form label.error {
    margin:0px;
    font-size:1.2em;
    color:Red;
}
input.checkbox {
    border: none
}
input:focus {
    border: 1px solid #c7e2f1;
    border-top:1px solid #5794bf;
    width:250px;
    padding:2px;
}
input.error {
    border: 1px solid #ff8282;
    border-top:1px solid red;
    background:#ffdcdc;
    width:250px;
    padding:2px;
}
select {
    width: 163px;
}
.error .messages, .error .messages li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
.error .messages li {
    padding: 0.1em 0 0 1.5em;
    color: #b92d23;
}
.error input {
    color: #b92d23;
}
.success {
    background: url(/design/images/success_icon.png) 350px 0.2em no-repeat;
}
.error {
    background: url(/design/images/error_icon.png) 350px 0.2em no-repeat;
}
fieldset {
    border: 1px solid #ccc;
    margin-bottom:10px;
}
.checkbox p, .checkbox .inputs {
    float: left;
}
.checkbox p {
    padding: 0;
    margin: 0 0 1em;
}
.checkbox .inputs {
    width: 165px;
}
.checkbox .inputs, .checkbox .inputs li {
    list-style: none;
    margin: 0 0 1em;
    padding: 0;
}
.checkbox .inputs li {
    margin: 0 0 0.3em;
}
.checkbox li label, .checkbox li input {
    display: inline;
    float: none;
    width: auto;
}
.validate_any {
    position: relative;
}
.validate_any.error {
    padding-top: 2em;
    background-position: 0 0.2em;
}
#terms_block {
    background-position: 205px 0.2em;
}
#terms_block .messages li {
    padding-top: 0.2em;
}
.validate_any .messages {
    position: absolute;
    left: 0;
    top: 0.1em;
}

Answer 1

您只需修改默认的highlight 和unhighlight 回调函数即可。您只能修改(不能删除)这两个回调函数，否则添加/删除标准错误/有效类的正常行为将被破坏。

我采用了默认回调函数来保留其正常行为，并添加了以下行，该行将针对父级 div 并应用类 .newclass。我只是为这个类指定了绿色背景色，只是为了演示它在 jsFiddle 中的工作情况。您可以根据需要重命名此类并重新设计其样式。

$(element).parent('div.field').addClass('newclass');

演示:http://jsfiddle.net/C7eWy/

将这些修改后的回调函数添加到您的 .validate() 中:

    highlight: function (element, errorClass, validClass) {
        if ($(element).attr("type") === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).parent('div.field').removeClass('newclass'); // <-- added this line
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if ($(element).attr("type") === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).parent('div.field').addClass('newclass'); // <-- added this line
        }
    },

请参阅文档以了解有关这些选项的更多信息:http://docs.jquery.com/Plugins/Validation/validate#toptions