jQuery验证插件自定义错误类分配给父div

debugcn 发表于 Dev

VAAA

我有一个表单，我用jQuery验证了我的验证插件。

这是我的用于验证的jQuery代码：

$('#authForm').validate({
                rules: {
                    Email: {
                        required: true,
                        email: true
                    },
                    Password: {
                        required: true
                    },
                    PasswordAgain: {
                        equalTo: "#Password"
                    },
                    Name: {
                        required: true
                    }
                },
                errorClass: "invalid",
                errorPlacement: function(error, element) { }
            });

我添加了一个errorClass，需要将其附加到父div，而不是输入字段：

字段之一的HTML结构如下：

<div class="form-group form-group-custom ">
    <label>Email Address</label>
    <input name="Email" type="text" class="form-control invalid" value="[email protected]" aria-required="true" aria-describedby="Email-error" aria-invalid="true">
</div>

而且，如果您注意到“ invalid”类已附加到实际上是正确的输入元素上，但我需要将其附加到我的输入元素上，<div class="form-group form-group-custom">并在验证正常后将其删除。

活泼的

该highlight和unhighlight功能总是用来申请/删除的任何类，当事情的有效/无效。只需编写针对您的父级的div自定义jQuery DOM遍历函数即可。

$('#authForm').validate({
    rules: {
        ....
    },
    ....
    highlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass(validClass).removeClass(errorClass);
    },
    ....

如果需要将这些类与插件自动应用的类完全分开，则不要使用代表预设类的关键字，而可以根据需要使用不同的类重命名。

    highlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass('myerrorclass').removeClass('myvalidclass');
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass('myvalidclass').removeClass('myerrorclass');
    },

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。