[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

[Cynthia]

Thank you for your response.  Everything you said makes sense and it looks like it would work for normal tab content.  But unfortunately it does not work with tabs that contain partial views.

items.Add().Text("Property Information")
.Selected(true)
.Content(@<text>@Html.Partial("_Tab1", Model.Properties)</text>);

The validator is undefined before the if and after the if. 

var validator = currentContent.data("kendoValidator");
    if (!validator) {
        validator = currentContent.kendoValidator({
            // optional settings
            validateOnBlur: true
        }).data("kendoValidator");
    }

[Viktor Tachev]

When using partial views as tab content in the TabStrip, the validator can be undefined if it is not initialized on the correct element. Here are some focused suggestions for your scenario:

Ensure the Validator Targets the Form in the Partial View

If your partial view (_Tab1) contains a form, initialize the validator on that form element, not on the tab content container.
Example:

var currentContent = $(tabStrip.contentElement(currentTab));
var form = currentContent.find("form");
var validator = form.data("kendoValidator");
if (!validator) {
    validator = form.kendoValidator({
        validateOnBlur: true
    }).data("kendoValidator");
}

If the partial view does not include a form, the validator will not find any inputs to validate.

Partial View Rendering Timing

If partial views are loaded dynamically (via LoadContentFrom or AJAX), make sure the validator initialization happens after the content is fully loaded.
If you use inline partials with @Html.Partial, the form should be present when the page is rendered.

Unique IDs and Validation Attributes

Ensure that form elements in your partial views have unique IDs and names to avoid conflicts.
Use [Required] attributes in your ViewModel to generate proper validation rules in the HTML.

I hope this information is helpful.