Управление JQuery проверить положение «прыжок»

Question

У меня есть таблица продуктов.В каждой строке есть флажок, чтобы включить продукт в сравнительное представление.Внизу таблицы (в tfoot) находится кнопка «Сравнить», чтобы представить выбор пользователя и показать ему сравнение его продуктов.

Для пользователя имеет смысл сравнивать только 2-3 продукта, поэтому я добавил проверку JQuery, чтобы контролировать это.У меня сообщение об ошибке появляется в той же строке, что и кнопка «Сравнить» для удобства.Это хорошо работает, но есть одна проблема: появляется плагин validate, который заставляет страницу «перескочить» назад к началу формы, которое начинается в верхней части таблицы.Это не желательно, я бы предпочел просто видеть сообщение об ошибке, и больше ничего не происходит.Есть ли способ переопределить это поведение перехода и предотвратить его возникновение?

Вот упрощенная версия таблицы:

<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>

Вот код проверки:

$("#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"
});

Если это не совсем возможно, тогда я просто разместю сообщение об ошибке в верхней части таблицы, чтобы пользователь мог его увидеть.Это сработало бы хорошо, но я думаю, что прыжок немного дезориентирует в этом случае.

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

он скачет, потому что форма отправляет

, попробуйте выше или поверните кнопку отправки на тип ввода = "кнопка"