Question

I have a table of products. In each row is a checkbox to include the product in a comparison view. At the bottom of the table (in a tfoot) is a “compare” button to submit the user’s selections and show them a comparison of their products.

It only makes sense for the user to compare 2-3 products, so I added jquery validation to control that. I have the error message appearing in the same row as the “compare” button for convenience. This works well, but there is one issue: the validate plugin appears to make the page “jump” back to the beginning of the form, which starts at the top of the table. That’s not desirable, I’d rather just see the error message display and nothing else happen. Is there a way to override this jump behavior and prevent it from happening?

Here is a simplified version of the table:

<h2 class="legend">Available Products</h2>
<form action="/products/series-comparison/" method="post" id="series-comparison-form" class="comparisonform">
<table class="product-table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Models</th>
            <th>Capacities</th>
            <th class="center">Compare</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Product A</td>
            <td class="center">10</td>
            <td>From x to y</td>
            <td class="center"><input type="checkbox" class="checkbox" name="ProductSeriesId" value="465" /></td>
        </tr>
        <tr>
            <td>Product B</td>
            <td class="center">10</td>
            <td>From x to y</td>
            <td class="center"><input type="checkbox" class="checkbox" name="ProductSeriesId" value="466" /></td>
        </tr>
        <tr>
            <td>Product C</td>
            <td class="center">10</td>
            <td>From x to y</td>
            <td class="center"><input type="checkbox" class="checkbox" name="ProductSeriesId" value="467" /></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td id="compare-message-cell" colspan="3"><div id="compare-message"></div></td>
            <td class="center"><input type="submit" name="Compare" class="bttn" value="Compare" /></td>
        </tr>
    </tfoot>
</table>
</form>

Here is the validation code:

$("#series-comparison-form").validate({
    rules: {
        ProductSeriesId: {
            required: true,
            minlength: 2,
            maxlength: 3
        }
    },
    messages: {
        ProductSeriesId: {
            required: "Please select at least 2 series to compare.",
            minlength: "Please select at least 2 series to compare.",
            maxlength: "You may compare a maximum of 3 series."
        }
    },
    errorElement: "span",
    errorLabelContainer: "#compare-message"
});

If it’s not really possible then I’ll just position the error message at the top of the table so the user can see it. That would work okay, but I think the jump is a little disorienting in this case.

Answer 1

// .bttn being the button i assume you are calling validate on
$(".bttn").click(function(e){
    //prevent jump to top of page
    e.preventDefault(); 
    $("#series-comparison-form").validate({
        //your rules here
    });
});

it jumps because the form is submitting

try above or turn your submit button to an input type=”button”