Я пытаюсь проверить поле select2 с помощью jquey.validation плагина, но ничего не происходит.
Я хочу сделать требуемое поле.
Я использую эту специальную функцию проверки:
$.validator.addMethod("requiredcountry", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
и это правило:
rules:
{
country:
{
required: true,
requiredcountry: ""
}
}
Какое поле select2 следует использовать для соответствия правилу?
Я ценю любую идею, как сделать select2 работать вместе с jquery.validation
10x
Просто добавьте ignore: [], в функцию проверки формы. Это позволит проверить скрытое поле. Итак, вы получите подтверждение для Select 2
$("#ContactForm").validate({
ignore: [],
rules: {
//Rules
},
messages: {
//messages
}
});
Я подробно рассказал об этом в сообщении в блоге: 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 здесь.
В качестве подсказки, пожалуйста, подумайте, что validate js связывается с изменениями выбора, а не выбирает 2. Это вызывает проблему в следующем случае:
select box, который и преобразуется в select2Вы можете исправить это с помощью
$("select").on("select2:close", function (e) {
$(this).valid();
});
Я обнаружил, что получение Select2 для работы с jQuery Validate очень сильно зависит от разметки, используемой при создании элемента управления Select2.
Для наиболее практичного использования плагина вы, вероятно, будете использовать динамически загруженные данные (данные, полученные через веб-службу и статические элементы <option/> на странице). И за их спецификацию, способ выполнить это, добавив Select2 в элемент <input type="hidden"/>. Однако элементы type = "hidden" не проверяются jQuery Validate по умолчанию.
Чтобы проверить скрытые элементы с помощью jQuery Validate, необходимо переопределить свойство ignore в объекте jQuery Validate configuration. См. Параметр ignore в spec. Попробуйте инициализировать значение ignore как null, чтобы активировать проверку.
просто добавьте строку в свою функцию проверки.
$('#_form_id').validate({
ignore: 'input[type=hidden]',
rules: {
//Rules
},
messages: {
//messages
},
}
Найден ответ на форумах @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'
});
Это не работает в Bootstrap Validator(), потому что валидатор включает все входы в форме. Это означает, что он будет проверять поле ввода ввода плагина select2. который будет мешать проверке мультиселектора
Чтобы исправить это, просто перейдите к validator.js Добавьте класс поиска ввода select2 .select2-search__field в список игнорирования:
Validator.INPUT_SELECTOR = ':input:not([type="submit"], button, .select2-search__field):enabled:visible'
<script>
$('select').select2();
$('select').css({"display": "block", 'position': 'absolute', 'top':'47px', 'z-index': '-1'});
</script>
<select required>
<option value="">Select a category</option>
<option>1</option>
</select>
поскольку исходный скрытый выбор не отображается, сообщение об ошибке, которое вы должны отрегулировать, находится на выбранном
В дополнение к ответу ABIRAMAN вот какой код, который
<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>
При создании настраиваемого правила вы также должны его правильно объявить. Поскольку ваше настраиваемое правило зависит от аргумента, вы должны передать аргумент при объявлении правила
rules: {
country: {
required: true,
requiredcountry: "your argument here" // <- declare the custom rule
}
}
$("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()
});
}
});
работайте для меня.
Вы можете проверить эту ссылку: https://github.com/rkeshmir/select2-validation
Здесь вы можете найти самый простой способ проверки компонентов select2. Идентификатор идеи запускает проверку для всех <select> элементов в DOM в их событии изменения. Также я добавил необходимые правила CSS, чтобы выделить ошибки и состояния успеха ввода.
проверить мой код. Я решаю свою проблему, используя эти коды... только несколько (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>Чтобы проверить входные данные 'select2', вы должны сначала сказать jquery validate, чтобы рассмотреть скрытые элементы:
$.validator.setDefaults({
ignore: [],
});
Это пользовательский ярлык /unhighlight, который я использую для указания select2 и тегов с подтверждением jquery:
$("#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;
}