Question

我有一张产品表。每行都有一个复选框，用于在比较视图中包含产品。在表格的底部（在tfoot中）是一个“比较”按钮，用于提交用户的选择并向他们展示他们产品的比较。

用户只比较2-3个产品才有意义，所以我添加了jquery验证来控制它。为方便起见，我将错误消息显示在与“比较”按钮相同的行中。这很有效，但有一个问题：验证插件似乎使页面“跳转”回到表格的开头，该表格从表格的顶部开始。这是不可取的，我宁愿只看到错误信息显示，没有别的事情发生。有没有办法覆盖这种跳跃行为并阻止它发生？

以下是该表的简化版本：

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

它会跳转，因为表单正在提交

尝试上面或将提交按钮变为输入类型=“按钮”

控制jquery验证“跳转”位置

1 个答案: