Question

我想使用jQuery Validation插件验证隐藏的表单，以便与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隐藏选择元素并更改为星号：

        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 Validation插件？

Answer 1

每次用户点击星标时，您似乎都在更新隐藏的选择。如果是这种情况，您需要做的就是确保隐藏的选择被验证，jQuery Validate将负责其余的事情：

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

ignore:[]告诉您确认您希望它验证隐藏的元素。

保持代码的其余部分有关维护隐藏选择的状态，但要删除在提交表单时执行操作的代码，并在验证的submitHandler中处理。

使用jQuery验证验证隐藏的表单元素（用于woocommerce评论）

1 个答案: