jquery validate 正在处理某些字段

Question

我在 wordpress cmets 中使用 jquery validate 来获取错误消息。我有四个字段 3 个文本，1 个文本区域。 3 个文本字段之一是电子邮件。问题是，只有 textarea 和 email 字段显示错误消息，但其他两个什么也没做 让我在没有这些的情况下提交表单。

<form action="url/to/the/site/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="novalidate"><div id="wdpajax-info"></div>
                <p>Su dirección de correo electrónico no será publicada. Los campos marcados con * son obligatorios</p><div class="nz-clearfix"></div><p class="respond-textarea"><textarea id="comment" name="comment" aria-required="true" cols="58" rows="10" tabindex="4" class="error" aria-invalid="true"></textarea></p><p class="comment-form-author"><input class="ninzio-placeholder required valid" id="opinion_title11" name="opinion_title11" type="text" tabindex="1" data-placeholder="Opinion title *" value="Opinion title *" size="30" aria-required="true"></p>
<p class="comment-form-author"><input class="ninzio-placeholder required valid" id="author11" name="author11" type="text" tabindex="1" data-placeholder="Name *" value="Name *" size="30" aria-required="true"></p>
<p class="comment-form-email"><input class="ninzio-placeholder required error" id="email" name="email" type="text" tabindex="2" data-placeholder="E-Mail *" value="E-Mail *" size="30" aria-required="true"></p>
        <!-- CRFP Fields: Start -->
        <p class="crfp-field">
                        <span class="star-rating-control"><div class="rating-cancel" style="display: block;"><a title="Cancel">0</a></div><div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="1">1</a></div><div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="2">2</a></div><div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="3">3</a></div><div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="4">4</a></div><div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-live"><a title="5">5</a></div></span><input name="rating-star" type="radio" class="star star-rating-applied" value="1" style="display: none;">
            <input name="rating-star" type="radio" class="star star-rating-applied" value="2" style="display: none;">
            <input name="rating-star" type="radio" class="star star-rating-applied" value="3" style="display: none;">
            <input name="rating-star" type="radio" class="star star-rating-applied" value="4" style="display: none;">
            <input name="rating-star" type="radio" class="star star-rating-applied" value="5" style="display: none;">
            <input type="hidden" name="crfp-rating" value="0">
        </p>
        <!-- CRFP Fields: End -->
        <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Enviar"> <input type="hidden" name="comment_post_ID" value="11458" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>            </form>

jquery 文件如下：

commentform.validate({
        rules: {
            // simple rule, converted to {required:true}
            comment:{required:true},
            // compound rule
            email: {
                required: true,
                email: true
            },
            opinion_title11: {required:true},
            author11: {required:true},
        },
        messages: {
            // simple rule, converted to {required:true}
            comment:"Los campos marcados con * son obligatorios.",
            opinion_title11: "Los campos marcados con * son obligatorios.",
            author11: "Los campos marcados con * son obligatorios.",
            // compound rule
            email: "La dirección de email debe contener @."
        },
submitHandler: function(form){
other validation codes.
}
});

我发现了不同的问题和解决方案，其中大部分是因为名称字段、必填字段、输入标签格式不正确。但我在我的代码中没有找到任何这些。我尝试更改文本字段的名称和顺序，但没有运气。

任何帮助将不胜感激。 谢谢，

---

更新

刚刚发现了另一个奇怪的功能。当我在提交时在无效的空文本字段上按退格键时，会显示我想在用户尝试发送空文本字段时显示的错误消息。

Answer 1

经过几次实验后，我发现了问题所在。 它是造成问题的占位符。

jquery validate 默认不能忽略占位符。如果任何字段中有占位符，则将此占位符验证为值，并且永远不会引发空字段错误。 为了解决这个错误，我在 form.validate{} 开始之前添加了以下 javascript。这将向验证器插件添加一个方法以避免占位符值。并且不要忘记在规则中将方法名称添加为 true。代码如下：

$.validator.addMethod("placeholder", function (value, element) {
        if (value == $(element).attr('data-placeholder')) {
            return false;
        } else {
            return true;
        }
    });

而规则数组是：

rules: {
            // simple rule, converted to {required:true}
            comment: {required: true, placeholder: true},
            // compound rule
            email: {
                required: true,
                email: true,
                placeholder: true
            },
            opinion_title: {required: true, placeholder: true},
            author: {required: true, placeholder: true}
        },

这解决了我的问题。希望它也能帮助其他人。

感谢您为帮助解决我的问题所做的一切努力。