用于动态元素和 ajax 的 jQuery 验证插件

Question

我尝试使用来自this question 的答案，但没有成功。下面是我的 HTML 的缩短版本。例如，如果一个用户创建一个包含 6 个路由器的订单，例如，当另一个用户去为该订单创建一个货件时，我在表中创建 6 行，以便用户可以扫描路由器的条形码。条形码通过 ajax 调用进行验证。如果一切正常，api 将返回“OK”。如果 api 结果不是“OK”，我想让它使条形码输入无效。

<form name="new_shipment" action="/shipments" method="post" id="shipment">
<table id="scan">
    <thead>
        <tr>
            <th>#</th>
            <th>Barcode</th>
            <th>Part Number</th>
            <th>Success</th>
        </tr>
    </thead>
    <tbody>
        <?php
            foreach ($this->scan_items as $k => $item) 
            {

                $count = $item['quantity'];
                for ($i=0; $i < $count; $i++) 
                {
        ?>
                    <tr>
                        <td><?= $i + 1 . '.'; ?></td>
                        <td><input class="scan_item" type="text" name="items[<?= $item['id']; ?>][]" value="" required></td>
                        <td><?= $item['part_number']; ?></td>
                        <td class="result_cell"><input type="text" class="api_message" name="api_message" value="" disabled></td>
                    </tr>
        <?php 
                }
            }            
        ?>
    </tbody>
</table>
</form>

对于我的 Javascript，我从输入框中获取序列号，发送 ajax 调用，然后将结果放在该行的最后一个单元格中。结果进入的输入框被禁用，原因很明显。

// Validate shipment form, but get rid of messages
var validator = $("#shipment").validate({
    errorPlacement: function() {
        return false;
    },
    submitHandler: function() {
        sendAjax('/shipments',['shipment']);    
    }
});
$('.scan_item').on('keypress', function(event) {
    if (event.which == 13) {
        $(this).closest('tr').next().find('.scan_item').focus();
        var cell = $(this).closest('tr').find('.api_message');
        var sn = $(this).val();
        sendAjax('/check_sn&sn=' + sn, null, function(data) { 
            cell.val(data);
        });
    }
});

根据来自第二个输入框的输入（即禁用），使第一个输入无效的最佳方法是什么？我无法使结果输入框成为必需，因为它被禁用了，所以it will be ignored。

Answer 1

由于您的条形码验证过程是特定的，因此自定义验证功能（您在问题中所述）可能是最佳解决方案。但是，jQuery Validator 确实提供了远程验证字段的能力（通过 AJAX）。

该插件有一个名为remote 的验证规则，可以完成您正在做的大部分工作。涉及到一些自定义编码，但没有达到插件不再起作用的程度。

参加look at this fiddle。

由于“/check_sn/”端点不存在，所以它无法工作，但我让它与提供的“/echo/json/”端点和用于更改响应的代理程序一起工作。

注意传递给.validate() 函数的errorPlacement 和success 属性。

...
errorPlacement: function(error, element) {
    //only display errors for the barcodes
    if ($(element).hasClass('scan_item')) {
        var $apiMessage = element.parents('tr').find('.result_cell');
        //show error in 'success' column
        error.appendTo($apiMessage);
    }
},
success: function(label, element) {
    if ($(element).hasClass('scan_item')) {
        //show 'OK' status in success column
        label.text('OK');
    }
}
...

我列出了这种方法的一些优点和缺点。

优点：

• 使用现有的验证器插件（无自定义验证脚本）

缺点：

• 使用label 元素而不是input 元素来显示错误
• 隐藏其他验证错误（例如必需的）需要一些过滤