Validation ASP.NET Form in Bootstrap Tabs

Question

I have a form on ASP.NET with its content divided into Bootstrap Tabs. However, some of these fields are required (Required) or are type="number" and "email", if they do not agree, sending the form will show a message from HTML5 asking to do the correct filling. However, as I am working with tabs, I can only see the messages if I am in the tab where it is being displayed.

Is there any way through JavaScript open the corresponding tab when any of your fields is required or filled incorrectly?

Answer 1

You can identify the elements with error by "class", as you are using bootstrap I believe the class is "has-error".

Identifying the elements you can identify which tab they belong to through the jQuery Closest function https://api.jquery.com/closest/.

var $elemError = $('.has-error:first');

if($elemError[0]){
    var $tabError = $elemError.closest('.tab-pane');
    var tabErrorId = $tabError.attr('id');  

    $('[href=#' + tabErrorId + ']').tab('show');
}