Prevent Tab Selection When Content Validation Fails
Environment
Product Version | 2013.3 1119 |
Product | Progress® Kendo UI® TabStrip for jQuery |
Description
How can I validate the current tab when the user selects another tab and also prevent user interaction with the active tab if the current tab validation is not passing?
Solution
To check for validation errors and prevent the selection, use the select
event of the TabStrip.
<div id="tabstrip">
<ul>
<li class="k-active">Tab 1</li>
<li>Tab 2</li>
</ul>
<div>
<div id="work-add-edit-form">
<input id="fullname"
type="text"
name="fullname"
class="k-textbox"
placeholder="Full name"
required
validationMessage="Enter {0}"
style="width: 220px;" />
</div>
</div>
<div>Content 2</div>
</div>
<script>
var onSelect = function(e) {
var container = $("#work-add-edit-form");
kendo.init(container);
container.kendoValidator();
var validator = $("#work-add-edit-form").kendoValidator().data("kendoValidator");
if (!validator.validateInput($("#fullname"))) {
e.preventDefault();
}
};
var tabStrip = $("#tabstrip").kendoTabStrip({
select: onSelect
}).data("kendoTabStrip");
</script>