如何实现仅对选中商品的数量输入框进行非空校验？

我完全懂你的需求：你希望用户提交订单时，只有被选中的商品对应的数量输入框必须填写，而不是所有商品的数量框都强制必填。HTML原生的required属性确实做不到这种条件性验证，所以咱们用JavaScript来实现这个逻辑就好。

下面我给你分步修改代码，保证逻辑清晰、好用：

1. 先给元素加统一标识（方便JS定位） #

首先给复选框和数量输入框添加专属class，同时给表单加个id，这样后续JS能快速找到对应元素，也让代码更易维护。另外我还帮你补上了之前没闭合的Product Image表头标签，避免HTML结构报错。

2. 添加表单提交验证逻辑 #

我们绑定表单的提交事件，在提交前遍历所有被选中的商品，检查对应的数量输入框是否合法——为空或者小于1都不行。如果有问题就阻止提交，还给用户明确的提示。

修改后的完整代码（关键改动已标注） #

<body> 
<?php include('navbar.php'); ?> 
<div class="container"> 
    <h1 class="page-header text-center">ORDER</h1> 
    <!-- 给表单加id，方便绑定提交事件 -->
    <form id="orderForm" method="POST" action="purchase.php"> 
        <table class="table table-striped table-bordered"> 
            <thead> 
                <th class="text-center"><input type="checkbox" id="checkAll"></th> 
                <th class="productheading">Category</th> 
                <th class="productheading">Product Image</th> <!-- 补全闭合标签 -->
                <th class="productheading">Product Name</th> 
                <th class="productheading">Price</th> 
                <th class="productheading">Quantity</th> 
            </thead> 
            <tbody> 
                <?php 
                    $sql = "select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc"; 
                    $query = $conn->query($sql); 
                    $iterate = 0; 
                    while ($row = $query->fetch_array()) { 
                ?> 
                <tr> 
                    <td class="text-center">
                        <!-- 给复选框加class -->
                        <input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" class="product-checkbox">
                    </td> 
                    <td><?php echo $row['catname']; ?></td> 
                    <td>
                        <!-- 简化PHP逻辑，用三元运算符更简洁 -->
                        <a href="<?php echo empty($row['photo']) ? 'upload/noimage.jpg' : $row['photo']; ?>">
                            <img src="<?php echo empty($row['photo']) ? 'upload/noimage.jpg' : $row['photo']; ?>" height="170px" width="80%">
                        </a>
                    </td> 
                    <td class="productname1"><?php echo $row['productname']; ?></td> 
                    <td class="price">Rs <?php echo number_format($row['price'], 2); ?></td> 
                    <td>
                        <!-- 给数量输入框加class+min属性，防止输入0/负数 -->
                        <input type="number" class="form-control product-quantity" name="quantity<?php echo $iterate; ?>" min="1">
                    </td> 
                </tr> 
                <?php $iterate++; } ?> 
            </tbody> 
        </table> 
        <div class="row"> 
            <div class="col-md-3"> 
                <input type="text" name="customer" class="form-control" placeholder="Customer Name" required> 
            </div> 
            <div class="col-md-3"> 
                <input type="number" name="number" class="form-control" placeholder="Contact Number" required> 
            </div> 
            <div class="col-md-2" style="margin-left:-20px;"> 
                <!-- 移除冗余的onclick，用表单提交事件处理验证 -->
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button> 
                <br /> <br /> <br /> 
            </div> 
        </div> 
    </form> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#checkAll").click(function() { 
        $('input:checkbox').not(this).prop('checked', this.checked); 
    }); 

    // 核心：表单提交时的验证逻辑
    $("#orderForm").on('submit', function(e) {
        let isFormValid = true;
        let missingQuantityProducts = [];

        // 遍历所有被选中的商品复选框
        $('.product-checkbox:checked').each(function() {
            // 找到当前行的数量输入框
            const quantityInput = $(this).closest('tr').find('.product-quantity');
            const quantityValue = quantityInput.val().trim();

            // 检查数量是否为空/小于1
            if (!quantityValue || parseInt(quantityValue) < 1) {
                isFormValid = false;
                // 记录未填数量的商品名称
                const productName = $(this).closest('tr').find('.productname1').text();
                missingQuantityProducts.push(productName);
                // 给输入框加红色边框提示错误（可选，提升体验）
                quantityInput.addClass('border-danger');
            } else {
                // 合法的话移除错误样式
                quantityInput.removeClass('border-danger');
            }
        });

        // 如果有不符合要求的，阻止提交并提示用户
        if (!isFormValid) {
            e.preventDefault();
            alert(`请填写以下选中商品的数量：\n${missingQuantityProducts.join('\n')}`);
        }
    });
}); 
</script> 
</body> 
</html>

关键改动说明 #

• 给表单、复选框、数量输入框添加了专属标识，让JS定位元素更精准
• 给数量输入框加了min="1"，从源头避免用户输入无效的0或负数
• 验证逻辑会遍历所有选中商品，检查对应数量：
  • 为空或小于1就阻止提交
  • 收集未填数量的商品名称，用弹窗明确告知用户
  • 给错误输入框加红色边框，直观提示用户哪里有问题
• 简化了PHP中图片链接的写法，让代码更简洁易读

这样修改后，完全符合你的需求：只有选中的商品需要填写数量，未选中的商品数量框可以留空，用户体验也更友好。

内容的提问来源于stack exchange，提问作者Beasta