JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <form method="POST" id="frmUser">
        <div class="tab-content">
            
            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">First Name</label>
                        <input type="text" name="mirst_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Middle Name</label>
                        <input type="text" name="middle_name" class="form-control" required>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Last Name</label>
                        <input type="text" name="last_name" class="form-control">
                    </div>
               ...

JavaScript

$(document).on('click','button[name="save"]',function(){ 
  
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li,.tab-pane').removeClass('active');


var bool=false;
$.each(tabs,function(index,value){ 
  
   if($(this).val().length<=0){
        $('ul.nav li:eq('+index+')').addClass('active');
$('.tab-content .tab-pane:eq('+index+')').addClass('active');
       $(this).focus();
        return false;

    }
    
});
return false;


});