jQuery Validation plugin for dynamic elements and 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.

To clarify, you want to validate, return and display a message in a separate text field. If the message is not "OK", mark the corresponding field invalid. Correct? — Ryan V
– Ryan V, Commented Jun 24, 2015 at 22:19
@hitopp Yes, that is correct. The message doesn't have to be in a text field, it can just be in the table cell, but the barcode input field should only be valid if the message returned from the API is "OK". — Katrina
– Katrina, Commented Jun 25, 2015 at 14:14

Ryan V · Accepted Answer · 2015-06-25 17:16:56Z

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 (e.g. required) would require some filtering

answered Jun 25, 2015 at 17:16

Ryan V

5163 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Katrina Over a year ago

Thank you so much. I knew about the remote thing, but I guess I had a hard time putting it all together. It's not exactly what I needed, but it's close enough that I think I can tweak it to work for me.

Collectives™ on Stack Overflow

jQuery Validation plugin for dynamic elements and ajax

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related