如何使用 jQuery php 验证 Bootstrap + 选择的插件
Posted
技术标签:
【中文标题】如何使用 jQuery php 验证 Bootstrap + 选择的插件【英文标题】：How to validate Bootstrap + chosen plugin with jQuery php 【发布时间】：2018-04-03 10:17:44 【问题描述】：我已经为可用产品制作了一个类别列表。我正在为多选下拉选项使用 bootstrap + 选择插件。我想要的是用户在提交表单时至少选择一个选项。我的意思是每当提交表格时，类别列表不应为空。根据我的同事的说法，它应该在 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>
【问题讨论】：
【参考方案1】：<!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>
【讨论】：
试试这个是用ajax写的。这是非常简单的长度 3：错误以上是关于如何使用 jQuery php 验证 Bootstrap + 选择的插件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 PHP 中使用 jquery 验证 'dd/mm/yyyy HH:ii P' 格式的日期时间？
使用 JQuery、Ajax、PHP、Json 进行表单验证