Question

我有这个表格，我收集用户提交的数据。我有的问题很简单，但我不知道如何找到它的修复。

此表单有多行，每行在提交时保存到数据库。我用CakePHP后端处理数据。验证此表单的正确方法是什么？我可以在输入字段中添加required属性，但是当我这样做时，每个输入字段都需要与相关数据一起存档。

有没有一种方法可以让我像用户选择一行那样，然后该行将获得验证属性，以便整个行充满数据？（例如，用户选择第1行“选择商店”下拉列表，然后必须填写整行才能提交表单。）

这是我的行的结构

        <div class="row txtMult">
            <div class='col-md-2 nopadding'>
                <div class='form-group nomarg'>
                    <select class="shop-name form-control select2" name="Quotationitems[0][shop_id]" style="width: 100%;">
                        <option selected="selected" >Select a Shop</option>
                        <?php
                        if (!empty($ShopsItems)) { 
                            foreach ($ShopsItems as $shop):        
                                ?> 
                                <option data-link="#<?= h($shop->id)?>" value="<?= h($shop->id)?>"><?= h($shop->shopname)?></option>
                            <?php endforeach;  } ?> 
                        </select>
                    </div>
                </div>

                <div class='col-md-1 nopadding'>
                    <div class='form-group nomarg text-center'>
                        <a href="#" data-toggle="modal" class="btn btn-success shop-value"><i class="fa fa-fw fa-info-circle"></i></a>
                    </div>
                </div>

                <div class='col-md-2 nopadding'>
                    <div class='form-group nomarg'>
                        <select class="material-price form-control select2" name="Quotationitems[0][material_id]" style="width: 100%;">
                            <option selected="selected" >Select the Material</option>
                            <?php
                            if (!empty($MaterialItems)) { 
                                foreach ($MaterialItems as $material):        
                                    ?> 
                                    <option data-price="<?= h($material->unitprice)?>" value="<?= h($material->id)?>"><?= h($material->name)?></option>
                                <?php endforeach;  } ?> 
                            </select>
                        </div>
                    </div>

                    <div class='col-md-1 nopadding'>
                        <div class='form-group nomarg'>
                            <input type='number' id="width" name="Quotationitems[0][width]" min='0' class='form-control val1'>
                        </div>
                    </div>

                    <div class='col-md-1 nopadding'>
                        <div class='form-group nomarg'>
                            <input type='number' id="height" name="Quotationitems[0][height]" min='0' class='form-control val2'>
                        </div>
                    </div>

                    <div class='col-md-1 nopadding'>
                        <div class='form-group nomarg'>
                            <input type='number' id="sqft" name="Quotationitems[0][sqft]" min='0' class='multTotal form-control val3' readonly>
                        </div>
                    </div>

                    <div class='col-md-1 nopadding'>
                        <div class='form-group nomarg'>
                            <input type='number' id="unitprice" name="Quotationitems[0][unitprice]"  min='0' class='form-control val4 material-total'>
                        </div>
                    </div>

                    <div class='col-md-1 nopadding'>
                        <div class='form-group nomarg'>
                            <input type='number' id="amount" name="Quotationitems[0][amount]"  min='0' class='form-control val5'>
                        </div>
                    </div>

                    <div class='col-md-2 nopadding'>
                        <div class='form-group nomarg'>
                            <input type='number' id="subtotal" name="Quotationitems[0][subtotal]" min='0' class='form-control multTotal2' readonly>
                        </div>
                    </div>
                </div>

Answer 1

我将向您解释实现目标的逻辑：

在row上使用JQuery .focusin()，您将知道选择了哪一行（通过事件 eventObject 参数）
现在，您将为该行的每个<input>激活一个事件（由type和id标识，以区分您要验证的数据类型），例如{{3 }或HTML属性，例如required，maxlength等......
同时在row上启用.keyup()事件，以检查所有字段是否为空。在这种情况下，您必须删除所有先前设置的验证规则。

.focusout()

将选择验证添加到用户选定的行

1 个答案: