title: Using Tabs on Website, how to make fields required on active tab?
body: <p>Currently I am building a website. On this particular page an Admin can edit the users of the system. I have this page layout setup into tabs. I want to make it to where if you are on the active tab before the submit button is pressed it makes sure all those fields on that tab are filled in.</p>
  
  <p>I can not set those text fields as required because those tabs that have text fields in them that are not active would not be required. </p>
  
  <p>Here is my JavaScript code for the tabs</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function openTab(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;
  
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
  
      }
  
      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
  
      // Show the current tab, and add an "active" class to the link that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Then here is part of the HTML that makes up the fields in the tabs. </p>
  
  <pre><code>&lt;ul class="tab"&gt;
      &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'CreateUser')"&gt;Create New User&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'SetPassword')"&gt;Set New User Password&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'SetRole')"&gt;Set User Role&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'DeleteUser')"&gt;Delete User&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'RestoreUser')"&gt;Restore Previous User&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="CreateUser" class="tabcontent"&gt;
    &lt;h3&gt;Create a New User&lt;/h3&gt;
      &lt;p&gt;Use this page to create a new user into the system.&lt;/p&gt;
          &lt;input type="text" name="FName" placeholder="Enter First Name" maxlength="25"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="text" name="LName" placeholder="Enter Last Name" maxlength="25"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="email" name="email" placeholder="Enter E-mail Address" maxlength="50"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="text" name="username" placeholder="Enter Username" maxlength="25"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="password" name="password" placeholder="Enter Password" maxlength="25"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;div class="SetUserRole"&gt;
              &lt;select name="Role" &gt;
                  &lt;option value=""&gt;Select User Role:&lt;/option&gt;
                  &lt;option value="Role1"&gt;Tech&lt;/option&gt;
                  &lt;option value="Role2"&gt;Viewer&lt;/option&gt;
                  &lt;option value="Role3"&gt;Admin&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input class="EUsubmit" type="button" value="Create Tech" onclick=""&gt;
      &lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;div id="SetPassword" class="tabcontent"&gt;
    &lt;h3&gt;Set a User Password&lt;/h3&gt;
    &lt;p&gt;User this page to set a new User Password&lt;/p&gt;
      &lt;div class="SelectUser"&gt;
          &lt;select name="User" &gt;
              &lt;option value=""&gt;Select User:&lt;/option&gt;
              &lt;option value="User1"&gt;User1&lt;/option&gt;
              &lt;option value="User2"&gt;User2&lt;/option&gt;
              &lt;option value="User3"&gt;User3&lt;/option&gt;
              &lt;option value="User4"&gt;User4&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;input type="password" name="password" placeholder="Enter New Password" maxlength="25"&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input class="EUsubmit" type="button" value="Set New Password" onclick=""&gt;
      &lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So what I am confused with is. If I have the CreateUser Tab open how do I make all those fields required while that tab is open. But if the SetPassword tab is open make all those fields required and making the CreateUser Tab have no required fields?</p>
  
  <p>Thanks in advance for any help.</p>