Question

我想要做的是错误取代我的html中的另一个类，并更改为另一个类的样式。

e.g。在我的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>

我希望错误消息取代类desc，然后更改为类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

您的原始代码存在一些问题。

您将minlength规则拼错为minLength。
您不会将minlength设置为true。它被设置为表示字符数的参数。 minlength: [2]
自定义消息获取一个占位符{0}，它代表您为规则设置的参数，并自动替换为该规则的参数。 minlength: "Your first name must have more than {0} characters"
您也不会将.validate()方法放在函数中。 .validate()方法仅用于 初始化 表单上的插件，因此只有在DOM就绪时才会调用一次。< / p>

如果您尝试将硬编码的span更改为错误消息，则无需更改errorClass。您可以将其保留为error。只需使用errorPlacement功能将硬编码span的内容更改为错误消息。使用jQuery DOM遍历技术，硬编码的span是输入的父元素之后的下一个元素。

errorPlacement: function(error, element) { $(element).parent().next('span').html(error); }

DEMO：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); } }); });

Answer 2

您可能正在接受这种验证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>

JQuery Validate：更改错误类，替换另一个类

2 个答案: