html5Validate插件示例之发表点评实例页面

HTML代码：

<form action="comment-success.php" method="post">
    <div class="fix mb10">
        <span class="l w70 mr10 tr">总体印象<span class="co ml5">*</span></span>
        <div class="cell">
            <div id="radioGroup"><!-- 页面载入后这个要隐藏，显示下面的星星评分 -->
                <input type="radio" id="radioImp1" name="impress" value="1" required data-target="starScore"><label for="radioImp1">差</label>
                <input type="radio" id="radioImp2" name="impress" value="2"><label for="radioImp2">较差</label>
                <input type="radio" id="radioImp3" name="impress" value="3"><label for="radioImp3">普通</label>
                <input type="radio" id="radioImp4" name="impress" value="4"><label for="radioImp4">较好</label>
                <input type="radio" id="radioImp5" name="impress" value="5"><label for="radioImp5">好</label>
            </div>
            <div id="starGroup" class="dn" aria-hidden="true">
                <i id="starScore" class="star_large rel">　　　　
                    <a href="javascript:" class="star_hover_1" title="差" data-rel="1"></a>
                    <a href="javascript:" class="star_hover_2" title="较差" data-rel="2"></a>
                    <a href="javascript:" class="star_hover_3" title="普通" data-rel="3"></a>
                    <a href="javascript:" class="star_hover_4" title="较好" data-rel="4"></a>
                    <a href="javascript:" class="star_hover_5" title="好" data-rel="5"></a>     
                </i>
                <span class="ml20 g9 abs mt2">点击星星为餐厅打分</span>
            </div>
        </div>
    </div>
    <div class="fix mb10">
        <span class="l w70 mr10 tr">口味<span class="co ml5">*</span></span>
        <div class="cell">
            <select name="taste" class="mr10" required>
                <option value="">请评分</option>
                <option value="1">差</option>
                ...
            </select>
            <span class="mr5">环境<span class="co ml5">*</span></span>
            <select name="envir" class="mr10" required>
                <option value="">请评分</option>
                ...
            </select>
            <span class="mr5">服务<span class="co ml5">*</span></span>
            <select name="server" class="mr10" required>
                <option value="">请评分</option>
                <option value="1">差</option>
                ...
            </select>
        </div>
    </div>
    <div class="fix mb10">
        <label class="l w70 mr10 tr" for="textarea">评价<span class="co ml5">*</span></label>
        <div class="cell">
            <textarea id="textarea" class="textarea" rows="5" name="content" required data-min="5"></textarea>
            <p class="mt2 g9">至少5个字符</p>
        </div>
    </div>
    <div class="fix">
        <span class="l mr10 w70"> </span>
        <div class="cell">
            <input type="submit" class="button" value="发表点评" />
        </div>
     </div>
</form>
                

JS代码：

$("form").html5Validate(function() {
    this.submit();
});