php - 动态 PHP 表单的表单验证
问题描述
我正在创建一个动态表单,要求用户选择某些日期并标记该特定日期的权重。用户可以使用新的行按钮自由添加多达 12 个输入。
我需要验证该表单并确保用户没有从选择框中选择相同的日期输入,并且所有添加的日期输入的权重输入总计为 100。我不确定验证部分使用什么。
到目前为止,我只能确保在尝试提交时表单不为空。
这是我的动态表单的 html 和 JS 代码
HTML:
<form method="post" action="viewInventory.php" id="insert_form">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="table-repsonsive">
<table class="table table-borderless" id="item_table">
<tr>
<th>Month</th><br>
<th>Weight</th>
</tr>
<tr>
<input class = 'form-control' type = 'hidden' name = 'example' value = 8>
<td><select name="month[]" class="form-control item_unit" required><option value="" disabled>Select Product</option><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td>
<td><input type="number" name="weight[]" class="form-control item_name" required /></td>
<td><button type="button" name="add" class="btn btn-success btn-sm add">+</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div align="center">
<a href="#confirm" data-target="#confirm" data-toggle="modal"><button type="button" class="btn btn-success">Submit</button></a>
</div>
</div>
<!-- // modal -->
<div id="confirm" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Notice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<p>
<h6>Confirm Job Order?</h6>
</p>
</div>
<div class="modal-footer">
<input type="submit" id="submit" name="choose" class="btn btn-success" value="Continue" />
<button type="button" class="btn btn-default btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
还有我的 JS:
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><select name="month[]" class="form-control item_unit"><option value="">Select Month</option><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td>';
html += '<td><input type="number" name="weight[]" class="form-control item_name" required /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">x</button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
除非总权重等于 100 并且选择框中没有重复的条目,否则用户应该无法继续。
解决方案
推荐阅读
- r - 尝试使用 spplot 时,我不断收到此错误
- android - 屏幕共享或在电视上投射
- python - 如何使用 ANTLRv4 在 Python 中解析 Java 代码
- android - Android TextClock 削减了部分时间格式
- mysql - GCP 云 SQL - 250 个,共 2000 个
- python - 匹配第一个括号之间的整个字符串到最后一个相应的括号甚至多行
- powershell - 位置参数有问题
- airflow - XComs 在 composer-1.17.1-airflow-2.1.2 的 Xcom 部分中不可见
- arrays - freefem++ 中的数组函数
- ssh - 反向代理/SSH 隧道到站点