Kendo button calling a javascript function on click

Question

I have a HTML input like this:

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

here's the validateForm function called when the button is clicked:

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

I want to replace this button with a Kendo Button, and I'm doing like this:

@(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")
)

The problem is that, if I have

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

the button isn't rendered correctly: the "return" word is messing it up. If I have this

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

it's rendered correctly and the function is called. However, when clicked, the button submits the form anyway, without caring with validation.

How can I achieve the former behaviour with this Kendo Button?

Answer 1

Try to use e.preventDefault() instead of returning false in order to stop the submit event. That's the recommended way anyway. :)

Answer 2

I have tried with only " return " and it works. But using e.preventDefault() does not do the trick for me.

Answer 3

Try Following code:

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