Question

我试图用最近几天的Jquery验证验证select2插件....它适用于sinlge元素选择...但是当我把多个=“true”它不起作用....在这里检查我的代码......

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

此处字段“Class”使用具有multiple =“multiple”的Select2插件，使用以下代码：

$("#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>

它没有验证上面的“类”字段!!

Answer 1

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

如果不起作用，请告诉我。另外，http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/

Answer 2

添加HTML所需

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

在验证器中执行这些更改

rules: {
    "Class[]": {
        required: true,
    }
},
messages: {
    "Class[]": {
        required: "Please select atleast one!!",
    }
}

Answer 3

以下脚本对我有用，您可以尝试一下并节省时间：-

脚本：-

$("#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>

Reference

使用multiple = true验证select2插件

3 个答案: