[Solved] Validator

[Cynthia]

I am trying to stop the user from switching to another tab if there are fields on the current tab that are not valid.  Here is the scenario.  I have a grid with a custom button that opens a partial view in a modal window.  This partial view has tabs on it which calls other partial views.  Before someone leaves a tab I would like to see if there are any fields that need addressing.  I'm doing this because I can't figure out how to return to the correct tab after I return from the controller when the model state is false.  (hint If this is an easier thing then please let me know)

The Application Number is required.  When I click on the other tabs it shows you in the console the previous tab, the length of the object and the fact that KendoValidator.Validate returns true.  Even though the application number is obviously blank.

Other Information Tab:

"Main" Partial View with the Tabs:

What am I doing wrong here?  Or is there an example that shows me how to take the user back to the tab with the fields that cause the model state to be invalid.

Here's the controller just in case:

 

 

 

 

 

 

[Nikolay]

Hello Cynthia,

The reason validator.validate() is returning true is that you’re validating the wrong DOM container (often empty), so the validator finds no inputs to validate and returns true by default.

1. You are selecting the wrong “current tab content” in select.

The select event fires before the tab actually changes and the e.contentElement points to the content element of the tab being selected, not the one you’re leaving. To overcome this validate the currently active tab (the one you’re leaving), not the one you’re going to.

function onSelect(e) {
    var tabStrip = e.sender;                 // Kendo TabStrip instance
    var currentTab = tabStrip.select();      // currently active tab (the one we're leaving)

    // Content element for the currently active tab
    var currentContent = $(tabStrip.contentElement(currentTab));

    // Create/reuse validator on the active tab content
    var validator = currentContent.data("kendoValidator");
    if (!validator) {
        validator = currentContent.kendoValidator({
            // optional settings
            validateOnBlur: true
        }).data("kendoValidator");
    }

    // Validate and cancel tab change if invalid
    if (!validator.validate()) {
        e.preventDefault();
        // optional UX
        // alert("Please fix errors before leaving this tab.");
    }
}

2.  The field may not actually be “required” for Kendo Validator

<kendo-textbox for="ApplicationNumber" required

That may not produce an <input required> attribute in the final HTML (depending on the wrapper/tag helper version).

A good practice in ASP.NET MVC/Core is to put [Required] on the ViewModel:

[Required(ErrorMessage = "Application Number is required.")]
public string ApplicationNumber { get; set; }

Regards,
Nikolay
Progress Telerik