验证表单多个有效标签

时间:2014-04-05 09:32:51

标签: jquery validation

我正在使用jQuery验证插件来验证表单。我在css中创建了以下样式

label.valid {
    width: 24px;
    height: 24px;
    background: url(../images/form_tic.png) center center no-repeat;
    display: inline-block;
    text-indent: -9999px;
    }

label.error {
    width: 24px;
    height: 24px;
    background: url(../images/form_cross.png) center center no-repeat;
    display: inline-block;
    text-indent: -9999px;
    } 

所以我想要的是每当字段输入正确时它会显示一个勾号而错误显示交叉。

以下是我的js代码。

 <script>
    $(document).ready(function() {        
        $('#commentForm').validate({
             success: function(label) {label.removeClass("error").addClass("valid")},
        rules: {
                cemail: {
                    required: true,
                    email: true
                },
                cname: {
                    required: true,
                    minlength: 5
                },
                ccompany: {
                    required: true,
                    minlength: 2,
                },
                cphone: {
                    required: true,
                    minlength: 8,
                    number:true
                },
                csupplier: {
                    required: true,
                    minlength: 2,
                }                   
            }        
        });

    });        
    </script>

现在的问题是每当我正确输入一个字段,并移动到下一个字段时,会显示复选标记,但只要我再次返回该字段并为每个字母或字母键入内容,我会添加一个有效类的标签导致打字的次数和我一直打字一样多。

此外,如果我从字段中删除所有文本,则不会删除有效的类标签,并显示错误类标签。这是附件照片

enter image description here

1 个答案:

答案 0 :(得分:0)

我意识到这个问题已有几年了,但我自己遇到了这个问题并找到了解决方案。问题是jQuery Validate只删除带有&#34;错误&#34;的标签。这意味着您无法使用label.removeClass("error").addClass("valid")。您可以添加类似&#34;有效的&#34;但你无法删除课程&#34;错误&#34;没有它堆叠标签,因为它正在寻找带有类#34;错误&#34;的对应标签。去除。看起来有点向后有一个带有错误和有效类的标签,但是通过适当排列和风格化的CSS它不会成为问题。

相关问题