如何使用jquery validate and Selected验证multi-select?
我能够用jqueryvalidate验证multi-select,并创建了一个as-demo。 按住Ctrl键取消选择所选内容,然后单击所选内容以查看效果如何使用jquery validate and Selected验证multi-select?,jquery,jquery-validate,jquery-chosen,Jquery,Jquery Validate,Jquery Chosen,我能够用jqueryvalidate验证multi-select,并创建了一个as-demo。 按住Ctrl键取消选择所选内容,然后单击所选内容以查看效果 <form id="myform"> <select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple"> <option value="1"
<form id="myform">
<select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple">
<option value="1">Hotel 3 Star</option>
<option selected="selected" value="2">Hotel 4 Star</option>
</select>
</form>
$(document).ready(function() {
var validator = $('#myform').validate({
// options
rules: {
"deals-1-sales_item": "required",
},
//ignore: ':hidden:not("#id_deals-1-sales_item")'
});
});
在研究过程中,我发现有人使用了jquerymultiselect
而不是select。jquery验证中似乎忽略了隐藏的元素。我试图应用该解决方案,但由于Selected有不同的方法,我被卡住了(multiselect在Selected中不存在)
这里有没有jQuery大师可以为我指出正确的方向?此外,我更希望基于类而不是基于字段名的解决方案。像这样:
这是我在中途提出的解决方案。但是不知道如何继续进行?
$.validator.addMethod("needsSelection", function(value, element) {
return $(element).???.length > 0;
});
var validator = $('#myform').validate({
});
$('#myform').find('select.multi_select_mandatory').each(function(){
$(this).change(function(){
$(this).valid();
});
$(this).rules('add', {
needsSelection: ""
});
});
解决方案:
使用下面的eicto解决方案,我能够创建一个基于类而不是基于字段名的解决方案。当您想要立即验证动态元素而不向服务器提交任何内容时,这特别有用
var validator = $('#deal_modal_form').validate({
// options
ignore: ':hidden:not(.chzn-done)'
});
$('#myform').find('select.multi_select_mandatory').each(function(){
$(this).chosen().change(function(){
$(this).valid();
});
$(this).rules('add', {
required: true,
});
});
这对我很有用:
$(document).ready(function() {
var validator = $('#myform').validate({
// options
rules: {
"deals-1-sales_item": "required",
},
ignore: ':hidden:not(.chzn-done)'
});
var checkerrors = function() {
validator.form();
};
var chosen = $('#id_deals-1-sales_item').chosen().change(checkerrors);
});
其想法是在每次更改时手动检查表单
我在@eicto和@kave solutions的帮助下编写了以下解决方案:
$.validator.addMethod("multiSelectRequired", function (value, element) {
return element.length > 0;
});
$("#aspnetForm").find('select.multi_select_mandatory').each(function () {
$(this).change(function () {
$(this).valid();
});
$(this).rules('add', {
'multiSelectRequired': true
});
});
初始化插件时,我添加`ignoe:[],以避免忽略或隐藏验证输入
我正在为我的引导项目使用名为bootstrap multiselect的特殊插件来呈现复选框select-这篇文章解释了这个问题,也看看这个在API中进行了验证的插件:谢谢Charlie。关于第一条意见,建议的解决方案正在提交中。不过我马上就要。让我看看那个插件。也许这有帮助…我检查了调试器,问题是
change
在select
实际更新之前触发。。。更糟糕的是。。。它不会更新选定的…@charlietfl该插件看起来很整洁,但是您在哪里看到最小选择验证?我想知道.checkForm()
和之间的区别。我没有找到任何关于checkForm
的文档,也不确定使用checkForm是否是个好主意,但它确实是一种不同的方法,valid
不检查表单数据本身,而checkForm
并不是说一种方法比另一种好,因为我不熟悉checkForm()
。但是,valid()
返回一个关于表单是否通过验证的布尔值true/false。如果不检查表单数据本身,它怎么能做到这一点?它也会触发任何适用的错误消息,就像未提交的submit
。@Sparky在这种情况下不起作用,因为它不调用check也起作用,但它甚至比更有效。checkForm
所以我不确定在这里使用它是否正确
$.validator.addMethod("multiSelectRequired", function (value, element) {
return element.length > 0;
});
$("#aspnetForm").find('select.multi_select_mandatory').each(function () {
$(this).change(function () {
$(this).valid();
});
$(this).rules('add', {
'multiSelectRequired': true
});
});