JQuery 验证：更改错误 class，替换另一个 class

Question

我想要做的是将错误替换为我的 html 中的另一个 class，并将样式更改为另一个 class。

例如在我的 HTML 我有

<div id="firstname" class="cfield">
    <span>First Name:</span>
    <label><input id="first" name="first" type="text">*</label>
    <span id="firstDesc" class="desc">Only characters</span>
</div>

我希望错误消息代替 class desc，然后更改为 class error 这样样式就可以更改（变为红色文本).这可能吗？

在我的 JQuery 我有：

function checkForm() {
$('#contactform').validate( { 
    errorElement: 'span',
    errorClass: 'desc',
    rules: { 
        first: {
            required: true,
            minLength: true,
        }
    },
    messages: {
        first: {
            required: "You must enter a first name",
            minLength: "Your first name must have more than 2 characters",
        }
    }
} );
}

Answer 1

可能是您正在进行这种验证css更改

$(document).ready(function(){
    $("#registerForm").validate({
    errorElement: 'span',
    errorClass: 'desc',
    rules: { 
        name: {
            required: true,
            minlength : 2
        }
    },
    messages: {
        name: {
            required: "You must enter a name",
            minlength: "Your first name must have more than 2 characters",
        }
    }
  });
});

span.desc {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   
 <label for="field">Name: </label>
 <input type='text' name='name' id='name' />
    <br/>
 <input type='submit' name='Submit' value='Submit' />

</form>

Answer 2

您的原始代码有一些问题。

您将 minlength 规则拼错为 minLength。
您不会将 minlength 设置为 true。它被设置为表示字符数的参数。 minlength: [2]
自定义消息有一个占位符 {0}，它表示并自动替换为您为规则设置的参数。 minlength: "Your first name must have more than {0} characters"
您也不会将 .validate() 方法放在函数内部。 .validate() 方法仅用于 初始化 表单上的插件，因此它只被调用一次 DOM 就绪。
如果您尝试将硬编码的 span 更改为错误消息，则无需更改 errorClass。您可以将其保留为 error。只需使用 errorPlacement 函数将硬编码的 span 的内容更改为错误消息。使用jQueryDOM遍历技术，硬编码span是输入的父元素之后的下一个元素。
```
errorPlacement: function(error, element) {
    $(element).parent().next('span').html(error);
}
```

演示：http://jsfiddle.net/48c593kd/

$(document).ready(function () {

    $('#contactform').validate({
        errorElement: 'span',
        rules: {
            first: {
                required: true,
                minlength: [2],
            }
        },
        messages: {
            first: {
                required: "You must enter a first name",
                minlength: "Your first name must have more than {0} characters",
            }
        },
        errorPlacement: function(error, element) {
            $(element).parent().next('span').html(error);
        }
    });

});

JQuery 验证：更改错误 class，替换另一个 class

JQuery Validate: Change error class, replacing another class

jquery

jquery-validate