使用jQuery UI SelectMenu插件主题的选择列表上的jQueryvalidation

这是另一个问题的后续问题; 首先，我需要在正常的选择列表上进行validation。 （第一部分可在这里找到 ）

我有一个选择菜单，上面有一些jQueryvalidation逻辑。 我使用的是ASP.NET MVC，因此有一些自定义属性 – 但是现在我只想让validation工作，所以属性并不重要。

我设法让它工作（实际上，Gajotres解决了它，而不是我。）

现在我想将它扩展到jQuery UI selectmenu插件（插件仍然是非官方的 – 在jQuery UI的下一个版本中正式发布，但你可以在这里找到它： jQuery UI选择菜单（非官方）

我已经设法使样式工作，但现在validation再次失败。 我发布了我的代码，这里是一个小提琴。 请注意，此处发布的代码不仅仅是为了简洁起见。

jsFiddle（带插件）

jsFiddle（没有插件[正常工作]）

---

预期的行为

当“默认”选项是选择菜单中当前选定的值时，用户必须无法提交表单。

---

以下是所有相关文件的链接，以防您因某些原因不想尝试小提琴。

jQuery的

• http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css
• http://code.jquery.com/ui/1.9.2/jquery-ui.js

jQuery Validation插件

• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js

选择菜单（分叉）

• http://ciel.github.com/jquery-ui/javascripts/jquery.ui.selectmenu.js
• http://ciel.github.com/jquery-ui/stylesheets/selectmenu.css

使用Javascript

$(document).ready(function() { $.validator.addMethod("valueNotEquals", function(value, element, arg){ return arg != value; }, ""); $("#form1").validate({ rules: { select_list : {valueNotEquals: $('#select_list').attr('data-val-mustbe-propertyvalue')}, }, messages: { select_list : { valueNotEquals: $('#select_list').attr('data-val-required') } }, submitHandler: function(form) { alert($('#form1').valid()); form.submit(); } }); $("#select_list").selectmenu(); });​ 

HTML

 
  Choose... 1 2   
​ 

CSS

  body { font-size: 62.5%; font-family: "Verdana",sans-serif; } fieldset { border: 0; } label, select, .ui-select-menu { float: left; margin-right: 10px; } select { width: 200px; } .wrap ul.ui-selectmenu-menu-popup li a { font-weight: bold; } 

可以在selectmenu.css文件中找到用于选择菜单主题的附加CSS

• http://ciel.github.com/jquery-ui/stylesheets/selectmenu.css

Answer 1

我知道你的新实现有什么问题。 我自己也遇到了同样的问题。

validation插件无法使用css display：nonevalidation元素。 为了使这个插件工作原始选择必须隐藏在自定义下方。

这是我为certificate这一点而做的一个例子：

http://jsfiddle.net/Gajotres/64aKZ/

你应该评论/取消注释这个css集团来区分差异：

  #select_list { display: block !important; } 

现在我可以看到这个插件没有被创建来覆盖旧的选择框（无论原始显示是块还是没有）。 如果你不介意看看我正在起诉的插件。 它将覆盖旧的选择框，即使其显示设置为阻止：

http://jamielottering.github.com/DropKick/

编辑：

还有另一个解决方案。 你需要玩css。 将其设置为选择框：

  #select_list { display: block !important; visibility: hidden; } 

现在你需要用新的选择框覆盖旧的选择框，或者至少向左浮动新的选择框。

Answer 2

您可以将这段代码添加到您的jQuery：

 //set the submit button disabled $('input[type="submit"]').attr('disabled','disabled'); //trigger a check of the value when the selectbox is changed $('#select_list').change(function(){ if($(this).val() != 'default'){ $('input[type="submit"]').removeAttr('disabled'); } });