Как заставить select2 работать с плагином jquery.validation?
Это сработало для меня так. Я не знаю, подходит ли это подход, но может помочь уменьшить линии
function myFun(){
var deffer = $q.defer();
angular.forEach(array,function(a,i) {
Service.method(a.id).then(function(res) {
console.log(res);
if(i == array.length-1) {
deffer.resolve(res);
}
});
});
return deffer.promise;
}
myFun().then(function(res){
//res here
});
14 ответов
Просто добавьте ignore: [], в вашу функцию проверки формы. Это включит проверку скрытого поля. Так вы получите подтверждение для Select 2
$("#ContactForm").validate({
ignore: [],
rules: {
//Rules
},
messages: {
//messages
}
});
Я решил проблему, решение состоит в том, чтобы изменить подсветку, отмену выделения и, прежде всего, методы errorPlacement для каждого экземпляра проверки. Однако, чтобы не изменять каждый файл, я помещаю изменения в файл jquery.validate.js
highlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
} else {
var elem = $(element);
if (elem.attr('readonly') == 'readonly') {
if (elem.hasClass("input-group-addon")) {
$("#" + elem.attr("id")).parent().addClass(errorClass);
} else {
$( element ).addClass( errorClass ).removeClass( validClass );
}
} else {
if (elem.hasClass("select2-hidden-accessible")) {
$("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
} else {
$( element ).addClass( errorClass ).removeClass( validClass );
}
}
}
},
unhighlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
} else {
var elem = $(element);
if (elem.attr('readonly') == 'readonly') {
if (elem.hasClass("input-group-addon")) {
$("#" + elem.attr("id")).parent().removeClass(errorClass);
} else {
$( element ).addClass( errorClass ).removeClass( validClass );
}
} else {
if (elem.hasClass("select2-hidden-accessible")) {
$("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
} else {
$( element ).removeClass( errorClass ).addClass( validClass );
}
}
}
},
errorPlacement: function(error, element) {
var elem = $(element);
if (elem.attr('readonly') == 'readonly') {
element = $("#" + elem.attr("id")).parent();
error.insertAfter(element);
} else {
if (elem.hasClass("select2-hidden-accessible")) {
element = $("#select2-" + elem.attr("id") + "-container").parent().parent().parent();
error.insertAfter(element);
} else {
error.insertAfter(element);
}
}
}
Чтобы проверить входные данные 'select2', вы должны сначала указать jquery validate для рассмотрения скрытых элементов:
$.validator.setDefaults({
ignore: [],
});
Это пользовательская подсветка / отмена подсветки, которую я использую для указания ошибок select2 и tagit с помощью jquery validate:
$("#someform").validate({
rules: {
nazwa: {
required: true
},
ilosc_w_opakowaniu: {
required: "#czy_opakowanie_zbiorcze:checked"
}
},
messages: {
nazwa: "Musisz wypełnić pole [Nazwa]",
ilosc_w_opakowaniu: "Musisz podać ilość produktu w opakowaniu zbiorczym",
},
highlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
} else {
$( element ).addClass( errorClass ).removeClass( validClass );
}
// select2
if( $(element).hasClass('select2-hidden-accessible') ){
dzik = $(element).next('span.select2');
if(dzik)
dzik.addClass( errorClass ).removeClass( validClass );
}
// tagit
dzik2 = $(element).parent().find('ul.tagit')
if( dzik2.length == 1 )
dzik2.addClass( errorClass ).removeClass( validClass );
},
unhighlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
} else {
$( element ).removeClass( errorClass ).addClass( validClass );
}
// select2
if( $(element).hasClass('select2-hidden-accessible') ){
dzik = $(element).next('span.select2');
if(dzik)
dzik.removeClass( errorClass ).addClass( validClass );
}
// tagit
dzik2 = $(element).parent().find('ul.tagit')
if( dzik2.length == 1 )
dzik2.removeClass( errorClass ).addClass( validClass );
}
});
И немного CSS:
/** select2 error hightight **/
.select2.error .select2-selection--single{
border-color:red !important;
color:red !important;
}
/** tagit error highlight **/
.tagit.error{
border-color:red !important;
color:red !important;
}
Вы можете проверить эту ссылку: https://github.com/rkeshmir/select2-validation Здесь вы можете найти самый простой способ проверки компонентов select2. Идентификатор идеи запускает проверку для всех <select> элементов в DOM при их событии изменения. Также я добавил обязательные правила CSS, чтобы выделить ошибки и состояния успеха ввода.
$("select.select2-me").each(function(index, el) {
if ($(this).is("[data-rule-required]") &&
$(this).attr("data-rule-required") == "true") {
$(this).on('select2-close', function(e) {
$(this).valid()
});
}
});
работа для меня.
Посмотри мой код. Я решаю свою проблему, используя эти коды ... только несколько (css, jquery) кодов
$(document).ready(function() {
//form validations---------------------------------------------------------
$('#sample').validate({
ignore: [],
errorClass: "error",
errorElement: "span"
});
$("#receiver_name").select2({
placeholder: "Receiver Name"
});
$("#receiver_name").select2().change(function() {
$(this).valid();
});
});.error .select2-choice.select2-default,
.error .select2-choices {
color: #a94442;
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.error:focus,
.error .select2-choice.select2-defaultLfocus,
.error .select2-choicesLfocus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.select2-container .select2-choices .select2-search-field input,
.select2-container .select2-choice,
.select2-container .select2-choices,
.error {
border-radius: 1px;
}<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet" />
</head>
<body>
<form id='sample'>
<select class="form-control" name="receiver_name[]" id="receiver_name" multiple required>
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
</body>
</html>просто добавьте строку в вашу функцию проверки.
$('#_form_id').validate({
ignore: 'input[type=hidden]',
rules: {
//Rules
},
messages: {
//messages
},
}
Это не работает в Bootstrap Validator (), потому что валидатор включает все входные данные в форме. Это означает, что он проверит поле поиска ввода плагина select2. которая будет мешать проверке множественного выбора
Чтобы исправить это, просто перейдите в validator.js. Добавьте класс поиска ввода select2 .select2-search__field в список игнорирования:
Validator.INPUT_SELECTOR = ':input:not([type="submit"], button, .select2-search__field):enabled:visible'
Найден ответ на форумах @ https://github.com/select2/select2/issues/215 опубликовано corinnaerin . Работал отлично для меня. Пример кода на http://plnkr.co/edit/4QaSguIiYsJtLpuPF8Rc?p=preview
var $select = $('select').select2({
placeholder: 'Choose',
allowClear: true
});
/*
* When you change the value the select via select2, it triggers
* a 'change' event, but the jquery validation plugin
* only re-validates on 'blur'
*/
$select.on('change', function() {
$(this).trigger('blur');
});
$('#myForm').validate({
ignore: 'input[type=hidden], .select2-input, .select2-focusser'
});
Когда вы создаете пользовательское правило, вы также должны правильно его объявить. Поскольку ваше пользовательское правило зависит от аргумента, вы должны передать аргумент при объявлении правила
rules: {
country: {
required: true,
requiredcountry: "your argument here" // <- declare the custom rule
}
}
Я обнаружил, что получение Select2 для работы с jQuery Validate очень сильно зависит от разметки, используемой при создании элемента управления Select2.
Для наиболее практичного использования плагина вы, вероятно, будете использовать динамически загружаемые данные (данные, полученные через веб-сервис, вместо статических <option/> элементов на странице). И согласно их спецификации , способ сделать это - подключить Select2 к элементу <input type="hidden"/>. Однако элементы type = "hidden" по умолчанию не проверяются jQuery Validate.
Чтобы проверить скрытые элементы с помощью jQuery Validate, нужно повозиться со свойством ignore в объекте конфигурации jQuery Validate. Смотрите опцию ignore в их спецификации . Попробуйте инициализировать значение ignore как null, чтобы активировать валидацию.
Я подробно рассказал об этом в своем блоге: http://chadkuehn.com/jquery-validate-select2/
Когда вы помещаете Select2 в тег SELECT, он скрывает оригинальный элемент. Так что в плагине проверки вы должны настроить правильную разметку переноса при выделении и выделении.
highlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-offscreen")) {
$("#s2id_" + elem.attr("id") + " ul").addClass(errorClass);
} else {
elem.addClass(errorClass);
}
},
unhighlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-offscreen")) {
$("#s2id_" + elem.attr("id") + " ul").removeClass(errorClass);
} else {
elem.removeClass(errorClass);
}
}
Смотрите DEMO здесь.
В качестве подсказки, пожалуйста, учтите, что валидатор js связывается с изменениями выбора, а не выбора 2. Это вызывает проблему в следующем случае:
- Требуется
select box, который и преобразуется вselect2 - . Вы нажимаете кнопку «Отправить», и ошибка показывает, что поле выбора является обязательным.
- Вы выбираете какую-то опцию из выбора 2.
- Ошибка проверки не скрывается автоматически
Вы можете исправить ее с помощью:
$("select").on("select2:close", function (e) {
$(this).valid();
});
В дополнение к ответу ABIRAMAN здесь приведен некоторый код, который
- делает поле выбора 2 красным, когда появляются ошибки
- Список ошибок ниже поля выбора2
<style>
span.error{
outline: none;
border: 1px solid #800000;
box-shadow: 0 0 5px 1px #800000;
}
</style>
<script>
$("#form").validate({
rules: {
email: "required"
},
highlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-hidden-accessible")) {
$("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
} else {
elem.addClass(errorClass);
}
},
unhighlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-hidden-accessible")) {
$("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
} else {
elem.removeClass(errorClass);
}
},
errorPlacement: function(error, element) {
var elem = $(element);
if (elem.hasClass("select2-hidden-accessible")) {
element = $("#select2-" + elem.attr("id") + "-container").parent();
error.insertAfter(element);
} else {
error.insertAfter(element);
}
}
});
$('select').select2({}).on("change", function (e) {
$(this).valid()
});
</script>