動態元素和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 /'端點和用於更改響應的代理程序。

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

我列出了這種方法的一些優點和缺點。

優點：

• 使用現有的驗證器插件（沒有定製的驗證腳本）

缺點：

• 使用一個label元件以顯示錯誤，而不是一個input元件
• 隱藏其他驗證錯誤（例如必需）會需要一些過濾