Kendo Popup Editor, validation error message

Question

I have a Kendo Popup Editor for my Kendo Group.

If there are validation errors when the user clicks update, I'd like to perform a jquery action.

I've used the onSave function to do this:

function onSave(e) {
        alert("you've clicked save")
}

However, the function is only called when there isn't a validation error message on a field. How can I raise a function when the user clicks save AND there is a validation message.

Thanks

Create a working demo of your code on jsfiddle and provide the link in your question — Rahul Gupta
I can't as I'm using kendo for mvc so can't really set the data source up — mgh75
For demonstration purpose only you can modify this DEMO here jsfiddle.net/phpdeveloperrahul/p2xnxqf9 to the way that describes your problem — Rahul Gupta
Your Demo is excatly what I have at present. However, I only want the alert box to show if the is a validation error on the screen. — mgh75
What sort of input fields and validation rules do you have? You may modify the above DEMO and provide the new link — Rahul Gupta

Rahul Gupta Rahul Gupta · Accepted Answer · 2018-01-11T12:05:04

I have created this DEMO.

This DEMO has:

A custom popup editor form
A custom Kendo Validator to validate the custom rules on the form fields
Checks the form for valid data on save event kendogrid
Shows up the valdation error error messages in an alert and prevent form submission

Here is the code snippet:

$("#grid").kendoGrid({
....
...
save: function(e) {
        alert('Popup form save event fired! Now validate the popup form for proper data');
      if (validateForm()) {//if form validation is successful
        alert("Form validation is successful");
        e.preventDefault();//This code line must be removed for successful form submission. It is kept here only for demonstration purpose
      }
      else {
        //Form validation failed
        e.preventDefault();//So prevent form submission
      }
    }
....
...

function validateForm()
{
    var validator = $("#popupForm").kendoValidator({
    rules: {
        minlength: function(input) {
        //only address will be validated
        if (input.is("[name=address]")) {
          if (input.val().length < 4)
            return false;
        }
        return true;
      },
      checkcity: function(input) {
        //only city will be validated
        if (input.is("[name=city]")) {
          if (input.val() != "ABC")
            return false;
        }
        return true;
      }
    },
    messages: {
        minlength: "Min length required is 4",
      checkcity: "City name must be ABC"
    }
  }).data("kendoValidator");

  if (validator.validate()) {
    return true;
  } 
  else {
    alert("Oops! There is invalid data in the form.\n"+validator.errors());
    return false;
  }

}

Kendo Popup Editor, validation error message

1 Answers