styledSelect 和 jQuery 验证答案

【问题标题】：styledSelect and jQuery ValidationstyledSelect 和 jQuery 验证
【发布时间】：2012-10-09 08:19:45
【问题描述】：

我正在为我的下拉菜单使用 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) 获得 'selected' 的类。

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery validation jquery-validate

【解决方案1】：

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

【讨论】：

【解决方案2】：

例如：

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

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

【讨论】：