Question

我有一些正在进行验证的Jquery。验证目前正在运行，因为它在一个只运行的匿名函数中。

当用户点击保存按钮并且验证失败时，我希望页面不回发，而不是重新加载（因此验证消息保持不变）。

目前该页面正在回发，即使我正在执行e.preventDefault（）并且我正在丢失验证消息。关于如何阻止页面回发的任何想法？

这是代码：

<script type="text/javascript">
    $(function () {

        $(".dateTimePickerField").kendoDateTimePicker({
            min: new Date(1950, 0, 1),
            max: new Date(2049, 11, 31),
            value: new Date(2000, 10, 1),
            interval: 15
        });

        var validator = $(".dateTimePickerField").kendoValidator({
            rules: {
                dateValidation: function (e) {
                    var currentDate = Date.parse($(e).val());
                    if (!currentDate) {
                        return false;
                    }
                    return true;
                }
            },
            messages: {
                //Define your custom validation massages
                required: "datetime required",
                dateValidation: "Invalid datetime"
            }
        }).data("kendoValidator");

        $('#bttnSaveGuru').click(function (e) {
            if (!validator.validate()) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
    });
</script>



<button runat="server" id="bttnSaveGuru" class="saveButton" type="button" clientidmode="Static">Save</button>
<tr>
    <td runat="server" id="tdDate"></td>
    <td runat="server" id="tdDescription"></td>
    <td runat="server" id="tdLocation"></td>
    <td><input type="text" runat="server" id="txtDate" class="dateTimePickerField" style="width:180px;margin-right:55px;" required="required"/></td>
    <td><input type="text" runat="server" id="txtDateEnd" class="dateTimePickerField" style="width:180px;margin-right:55px;" required="required"/></td>
</tr>

我建议的解决方案是在按钮的onclick属性中运行验证，就像这样

 <button runat="server" id="bttnSaveGuru" class="saveButton" type="button" clientidmode="Static" onclick="if(!checkValidation()){return false;}">Save</button>

这确实会阻止页面回发，但它需要按钮上的内联代码，如果可以，我宁愿阻止页面在匿名函数中回发。

Answer 1

我与一些同事谈过并得出以下结论。

因为这是一个asp.net服务器端按钮，所以它总是会在其onclick事件中获取doPostback。无论我在匿名函数中添加什么来防止回发，它都无法正常工作。

看起来像这样阻止回发服务器端按钮的唯一方法是从按钮OnClick或OnClientClick属性本身返回false。至少这是我所经历的事情，以便我能够采用的解决方案。

匿名javascript函数代码似乎附加到onclick事件，但它不会阻止在onclick事件中自动生成的dopostback。

<button runat="server" id="bttnSaveGuru" class="saveButton" type="button" clientidmode="Static" onclientclick="if(!checkValidation()){return false;}">Save</button>

Answer 2

您是否检查过是否真的进入了点击手柄？如果是的话，你能试试吗

$('#bttnSaveGuru').click(function (e) {
  e.preventDefault();
  if (validator.validate()) {
    //manually trigger submit
  }
});

Answer 3

由于javascript是异步的，因此在验证运行时会激活按钮操作。单击，验证然后确认它是否有效直接阻止默认值！

    $('#bttnSaveGuru').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (!validator.validate()) {
            //send here
        }
    });

回帖后的Jquery停止按钮

3 个答案: