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 /'端点和代理程序来改变响应。

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

...
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');
    }
}
...

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

优点：

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

CONS：

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

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

1 个答案: