Question

我在wordpress评论中使用jquery验证错误消息。我有4个字段3个文本，1个textarea。 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验证无法忽略占位符。如果任何字段中有占位符，则将此占位符验证为值，并且永远不会抛出空字段错误。为解决此错误，我在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}
        },

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

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

jquery validate正在研究某些领域

已更新

1 个答案: