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

Question

I tried using the answer from this question , with no success. Below is a shortened version of my HTML. If a User creates an Order with 6 routers, for example, when another User goes to create a Shipment for the Order, I create 6 rows in the table so the User can scan the router's barcode. The barcodes are validated through an ajax call. If everything is good, the api will return "OK". I want to make it so that the barcode input is invalid if the api result is not "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>

For my Javascript, I grab the serial number from the input box, send an ajax call, and put the result in the last cell for the row. The input box that the result goes into is disabled, for obvious reasons.

// 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);
        });
    }
});

What is the best way to make the first input invalid based on the input from the second input box, that is disabled? I cannot make the result input box required, because it is disabled, so it will be ignored .

Answer 1

Since your barcode validation process is specific, a custom validation function (what you've stated in your question) might be the best solution. However, jQuery Validator does offer the ability to validate a field remotely (via AJAX).

The plugin has a validation rule called remote that accomplishes much of what you're doing. There is a bit of custom coding involved, but not to the extent that the plugin no longer serves a purpose.

Take a look at this fiddle .

It won't work since the '/check_sn/' endpoint doesn't exist, but I got it to work with the provided '/echo/json/' endpoint and a proxy program for altering the response.

Take notice of the errorPlacement and success properties passed to the .validate() function.

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

I've listed some pros and cons to this approach.

PROS:

• Uses the existing validator plugin (no custom validation script)

CONS:

• Uses a label element to display the error rather than an input element
• Hiding other validation errors (eg required) would require some filtering