javascript - styledSelect 和 jQuery 验证

Question

我正在为我的下拉菜单使用 styledselect... http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview

我也在使用 jQuery 验证插件 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

如何让验证在“styledSelect”下拉列表中起作用？

我的下拉列表 HTML 是

<select name="gender" class="required">
   <option value="" selected="selected">Select Gender</option>
   <option value="Male">Male</option>
   <option value="Female">Female</option>
</select>

styledSelect 插件完成后生成的 HTML 是

<select name="gender" class="required" style="display: none;">
       <option value="" selected="selected">Select Gender</option>
       <option value="Male">Male</option>
       <option value="Female">Female</option>
    </select>    

<div class="styledSelect">
       <ul>
          <li rel class="option selected first">Select Gender</li>
          <li rel="Male" class="option">Male</li>
          <li rel="Female" class="option last">Female</li>
       </ul>
    </div>

从列表中选择的元素 (li) 获得“选定”类。

我当前用于验证插件的 js 是最简单的设置。

$('.signupform').validate();

任何帮助将不胜感激！

Answer 1

例如：

<script type="text/javascript">
/*validate form*/
$(document).ready(function() {
    var validator = $("#form1").validate({
        rules:{
            gender: {required: true}

        },
    errorClass: "invalid",
        errorElement: "div"
    });
}); 
</script>

Answer 2

我制作的这个jsfiddle应该解释一下。您可以使用该errorPlacement选项将错误消息放置在您喜欢的任何位置。