Question

I have an ajax call that returns a result in HTML. If the request is good, it returns a list of contacts in HTML; otherwise it should return validation errors. Both scenarios return HTML.

The problem is this: If the requests to the server is successful, I have no way to tell if the result is validation errors or the list of contacts. I need to know so I can manipulate my HTML accordingly:

        $.ajax({
            type: 'POST',
            [snip]
            success: function(response) {
                 // here I need to tell if there was a validation error
                 // or the request succeeded
            }

For example, HTML for a good request might look like…

<tbody>
    <tr>
        <td>@contact-name</td>
    <tr>
</tbody>

While a bad request will look like…

<ul>
    <li>Please fix some error</li>
</ul>

I display the results in different locations, hence the need to distinguish between possible results.

Answer 1

If you don’t want to move to JSON, and you don’t want to use different status codes, given your markup you can differentiate based on the tag name of the first element:

success: function(response) {
    var elements = $(response);
    if (elements[0].tagName.toUpperCase() === "UL") {
        // ...bad response...
    }
    else {
        // ...good response...
    }

    // Display it either way (in our case, we just append, but you'll probably
    // put them in different places)
    elements.appendTo(document.body);
}

Live example

Or for that matter, include a dummy element at the outset that you always remove, which includes the result (e.g., <div class='good'></div> vs. <div class='bad'></div>).