使用jQuery验证验证隐藏表单元素（用于woocommerce审查）

我想用jQuery验证插件验证一个隐藏表单，以便与woocommerce评论一起使用

HTML输出为：

<form>
<!-- then later -->
<div class="comment-form-rating-wrap"><p class="comment-form-rating"><label for="rating">Overall Rating</label><span class="required">*</span><p class="stars"><span><a class="star-1" href="#">1</a><a class="star-2" href="#">2</a><a class="star-3" href="#">3</a><a class="star-4" href="#">4</a><a class="star-5" href="#">5</a></span></p><select style="display: none;" name="rating" id="rating">
        <option value="">Rate…</option>
        <option value="5">Perfect</option>
        <option value="4">Good</option>
        <option value="3">Average</option>
        <option value="2">Not that bad</option>
        <option value="1">Very Poor</option>
    </select></p><div class="rating-error">select a rating</div><p></p></div>

</form>

总体评级*

比率…
完美的
好
平均值
还不错
很穷
选择一个评级

正如您所看到的，上面有一个表单元素是隐藏的，因为表单显示的是星号（这是一个产品评论），它使用jquery隐藏select元素并更改为星号：

        jQuery('#rating').hide().before('<p class="stars"><span><a class="star-1" href="#">1</a><a class="star-2" href="#">2</a><a class="star-3" href="#">3</a><a class="star-4" href="#">4</a><a class="star-5" href="#">5</a></span></p>');

jQuery('body')
    .on( 'click', '#respond p.stars a', function(){
        var jQuerystar   = jQuery(this);
        var jQueryrating = jQuery(this).closest('#respond').find('#rating');

        jQueryrating.val( jQuerystar.text() );
        jQuerystar.siblings('a').removeClass('active');
        jQuerystar.addClass('active');

        return false;
    })
    .on( 'click', '#respond #submit', function(){
        var jQueryrating = jQuery(this).closest('#respond').find('#rating');
        var rating  = jQueryrating.val();

    });

jQuery（'#rating'）.hide（）.before（'
）；
jQuery（'body'）
.on（'单击'，'响应p.stars a'，函数（）{
var jQuerystar=jQuery（this）；
var jQueryrating=jQuery（this）.closest（'#respond'）.find（'#rating'）；
jQueryrating.val（jQuerystar.text（））；
jQuerystar.sibbines（'a'）.removeClass（'active'）；
jQuerystar.addClass（'active'）；
返回false；
})
.on（'click'，'respond'，submit'，function（）{
var jQueryrating=jQuery（this）.closest（'#respond'）.find（'#rating'）；
var rating=jQueryrating.val（）；
});

---

所以问题是如何将其链接到jQuery验证插件？

每次用户单击星号时，您似乎都在更新隐藏的选择。如果是这种情况，您所需要做的就是确保已验证隐藏的select，而jQuery Validate将处理其余部分：

$('#theOverallForm').validate({
     ignore:[],
     rules: {
         rating:'required'
         //your other rules here
     }
});

ignore:[]

告诉validate您希望它验证隐藏的元素

---

保留关于维护隐藏选择状态的其余代码，但去掉提交表单时执行操作的代码，并在validate的

submitHandler

中处理这些代码。

OP说这些是“非表单”元素。。。没有

form

tags.@Sparky-我怀疑OP刚才说错了？或者真的，为什么不在整件事上贴上一些表单标签。。。不应该伤害任何东西：）我认为这意味着“我想验证这些不是形式元素的星星”，而不是“没有形式”，我不确定，但你会感到惊讶。最近我至少回答了另外一个问题，OP没有/want表单标记。@user1358120，不要仅仅因为你写不好就责骂试图帮助你的人。顺便说一句，我们应该从字面上理解这个问题，而不是猜测你最初遗漏的代码。我把这个问题清理了一下，我看不出有任何理由再关闭它了。OP-最好不要在答案的某些变体中进行编辑。相反，让未来的读者来阅读答案，答案应该足够清楚