1

我正在尝试使用最近几天的 Jquery 验证来验证 select2 插件......它适用于单元素选择......但是当我输入 multiple="true" 时它不起作用......检查我的代码。 ..

<select name="Class[]" id="Class" multiple="multiple">
<option value="1">Class 1</option>
    <option value="2">Class 2</option>
</select>

这里的“类”字段是使用 Select2 插件和 multiple="multiple" 通过使用以下代码：

$("#Class").select2();
$('#Class').select2({placeholder: "Select"});

它工作正常。现在我想使用以下代码验证它：

<script type="text/javascript">
$(document).ready(function() {
$("input, textarea, select").not('.nostyle').uniform();
$("#FormName").validate({
    ignore: 'input[type="hidden"]',
    rules: {
        Class: {
            required: true,
        }
    },
    messages: {
        Class: {
            required: "Please select atleast one!!",
        }
    }   
});
});
</script>

它没有在“类”字段上方验证！！

4

3 回答 3

3

你可以看看这个：有很多解决方案： https ://github.com/ivaynberg/select2/issues/215

让我知道它是否不起作用。另外，http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/

于 2013-07-17T16:51:33.580 回答
1

下面的脚本对我有用，你可以试试这个并节省你的时间：-

脚本：-

$("#addPartnerBranch").validate({
 ignore: [], 
 rules: {
     partner_name: {
         required: true,
         minlength: 4
     },
     "address_emailAddresses[]": { required:true },
     'address_emailAddresses': 'required',
     'address[phoneNumbers][]': 'required',
 },
 submitHandler: function (form) {
    console.log(form);
 }
});

HTML 表格 

    <form id="addPartnerBranch" method="post" enctype="multipart/form-data" novalidate="novalidate">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Add Partner Branch</h4>
        </div>
        <div class="modal-body">
            <div class="userProfile-overflowY">         
                <fieldset>
                    <legend id="profileLabel">Branch Detail:</legend>
                    <div class="box-content bordered-all">
                        <div class="col-md-12">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <div class="input text required"><label for="partner-name">Branch Name *</label><input type="text" name="partner_name" class="form-control input-lg error" required="required" id="partner-name"><label for="partner-name" class="error">This field is required.</label></div>                                  </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="prtnerEmployee">Mail address *</label>
                                    <input type="hidden" name="address[emailAddresses]" value=""><select name="address[emailAddresses][]" multiple="" required="required" class="select2_2 form-control select2-hidden-accessible error" tabindex="-1" aria-hidden="true"><option value="">Add email &amp; Enter</option></select><label for="address[emailAddresses][]" class="error">This field is required.</label><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                 </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="prtnerEmployee">Phone number *</label>                                  
                                    <input type="hidden" name="address[phoneNumbers]" value=""><select name="address[phoneNumbers][]" multiple="" required="required" class="select2_2 form-control select2-hidden-accessible error" tabindex="-1" aria-hidden="true"><option value="">Add phone &amp; Enter</option></select><label for="address[phoneNumbers][]" class="error">This field is required.</label><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                   </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="prtnerEmployee">Fax number</label>                                  
                                    <input type="hidden" name="address[faxNumbers]" value=""><select name="address[faxNumbers][]" multiple="" class="select2_2 form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true"><option value="0">Please Add</option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                 </div>
                            </div>                      
                        </div>                      
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="modal-footer">
            <input type="hidden" name="type" id="type" value="55">              <input type="hidden" name="partnerId" id="partnerid" value="1">             <button type="button" class="btn btn-default btn-sm waves-effect waves-light" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary btn-sm waves-effect waves-light">ADD</button>
        </div>
        </form>

参考

于 2018-11-19T11:06:29.013 回答
0

Add required to your HTML

<select name="Class[]" id="Class" multiple="multiple" required>

And do these changes in validator

rules: {
    "Class[]": {
        required: true,
    }
},
messages: {
    "Class[]": {
        required: "Please select atleast one!!",
    }
}
于 2017-10-15T05:41:49.037 回答