Question

我有这样的HTML输入：

<input type="submit" name="saveForm" value="Save" onclick="return validateForm()"/>

这是单击按钮时调用的validateForm函数：

function validateForm() {
    if (someErrorCondition) {
        alert("error");
        return false;
    }
    reallySubmitForm();
}

我想用Kendo Button替换这个按钮，我这样做：

@(Html.Kendo().Button()
    .Name("save")
    .HtmlAttributes( new {type = "submit"})
    .ImageUrl(Url.Content("~/Images/save.png"))
    .Events(e => e.Click("return validateForm"))    <---------  here's the problem
    .Content("Save")
)

问题在于，如果我有

.Events(e => e.Click("return validateForm"))

按钮未正确呈现：“返回”字样搞乱了。如果我有这个

.Events(e => e.Click("validateForm"))

它被正确渲染并调用该函数。但是，单击此按钮时，按钮仍会提交表单，而无需关心验证。

如何使用此Kendo按钮实现以前的行为？

Answer 1

尝试使用e.preventDefault()而不是返回false以停止提交事件。无论如何，这是推荐的方式。：）

Answer 2

我只尝试过“返回”并且有效。但是使用e.preventDefault（）对我来说不起作用。

Answer 3

尝试以下代码：

@(Html.Kendo().Button()
.Name("save")
.HtmlAttributes( new {type = "submit"})
.ImageUrl(Url.Content("~/Images/save.png"))
.Events(e => e.Click("validateForm"))
.Content("Save"))

function validateForm(e) {
  if (someErrorCondition) {
    alert("error");
    e.preventDefault();
  }
 else {
      reallySubmitForm();
    }
}

Kendo按钮在点击时调用javascript函数

3 个答案: