Как проверить Bootstrap + выбранный плагин с переполнением стека jQuery
Я сделал список категорий для доступных продуктов. Я использую плагин bootstrap + choosen для выпадающих опций multiSelect. Что я хочу, чтобы пользователь выбрал хотя бы 1 вариант, когда он / она отправляет форму. Я имею в виду, что при отправке формы список категорий не должен быть пустым. По словам моих коллег, это должно быть сделано в php, но я уже использовал сторонний плагин для раскрывающегося списка multiSelect, так что jQuery или php не имеют значения. Любая помощь будет оценена.
Я пробовал это
Мой код начальной загрузки и код проверки php:
<select multiple class="chosen-select" data-placeholder="Select Your Category" name="category">
<option>Product a</option>
<option>Product b</option>
<option>Product c</option>
<option>Product d</option>
<option>Product e</option>
<option>Product f</option>
<option>Product g</option>
<?php
foreach ($catlist as $category) {
if (isset($_POST["category"]) && $_POST["category"] == $category)
echo "<option selected='selected' value='$category'>$category</option>";
else
echo "<option value='$category'>$category</option>";
}
?>
</select>
//define $categorylist here
$catlist = array (
"Product a",
"Product b",
"Product c",
"Product d""Product e""Product f""Product g");
Я тоже пробовал с jQuery
<script>
$(document).ready(function(){
$('.chosen-select').chosen({
width: "100%",
min_selected_options:1,
max_selected_options:3
});
});
</script>
Решение
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="#" method="post" id="form">
<p id="message"></p>
<select multiple class="chosen-select" data-placeholder="Select Your Category" id="category" name="category[]">
<option>Product a</option>
<option>Product b</option>
<option>Product c</option>
<option>Product d</option>
<option>Product e</option>
<option>Product f</option>
<option>Product g</option>
</select>
<button type="submit">submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('#form').on('submit', function (e) {
// console.log('errors');
e.preventDefault();
var selectData = $('#category').val();
// console.log(selectData);
if (selectData.length< 1 || selectData.length> 3) {
$('#message').html('error').css({'color':'red'});
return;
}
$.ajax({
type: 'post',
url:$(location).attr('href'),
data: selectData,
success: function (data) {
$('#message').html('success').css({'color':'green'});
}
});
});
</script>
</body>
</html>
Другие решения
Других решений пока нет …