-1

我想使用 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…&lt;/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 插件？

4

1 回答 1

1

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

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

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

保留其余代码以维护隐藏选择的状态，但摆脱在提交表单时执行操作的代码，并在submitHandlervalidate 中处理它。

于 2013-08-01T16:00:02.040 回答