ウェブサイトのタブを使用すると、アクティブなタブにフィールドを入力する必要はありますか？

Question

現在、私はウェブサイトを構築中です。この特定のページで、管理者はシステムのユーザーを編集できます。私はタブにこのページレイアウトのセットアップを持っています。送信ボタンが押される前にアクティブなタブにいる場合は、そのタブのフィールドがすべて埋められるようにします。

これらのテキストフィールドは、必要に応じて設定できません。アクティブではないテキストフィールドは必須ではありません。ここで

そして、ここでは、タブ

<script type="text/javascript"> 

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 < 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 < 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"; 
    } 

</script> 

のための私のJavaScriptコードでタブ内のフィールドを構成するHTMLの一部です。

<ul class="tab"> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'CreateUser')">Create New User</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'SetPassword')">Set New User Password</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'SetRole')">Set User Role</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'DeleteUser')">Delete User</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'RestoreUser')">Restore Previous User</a></li> 
</ul> 

<div id="CreateUser" class="tabcontent"> 
    <h3>Create a New User</h3> 
    <p>Use this page to create a new user into the system.</p> 
     <input type="text" name="FName" placeholder="Enter First Name" maxlength="25"> 
     <br><br> 
     <input type="text" name="LName" placeholder="Enter Last Name" maxlength="25"> 
     <br><br> 
     <input type="email" name="email" placeholder="Enter E-mail Address" maxlength="50"> 
     <br><br> 
     <input type="text" name="username" placeholder="Enter Username" maxlength="25"> 
     <br><br> 
     <input type="password" name="password" placeholder="Enter Password" maxlength="25"> 
     <br><br> 
     <div class="SetUserRole"> 
      <select name="Role" > 
       <option value="">Select User Role:</option> 
       <option value="Role1">Tech</option> 
       <option value="Role2">Viewer</option> 
       <option value="Role3">Admin</option> 
      </select> 
     </div> 
    <br><br> 
    <input class="EUsubmit" type="button" value="Create Tech" onclick=""> 
    <br><br> 
</div> 

<div id="SetPassword" class="tabcontent"> 
    <h3>Set a User Password</h3> 
    <p>User this page to set a new User Password</p> 
    <div class="SelectUser"> 
     <select name="User" > 
      <option value="">Select User:</option> 
      <option value="User1">User1</option> 
      <option value="User2">User2</option> 
      <option value="User3">User3</option> 
      <option value="User4">User4</option> 
     </select> 
    </div> 
    <br> 
    <input type="password" name="password" placeholder="Enter New Password" maxlength="25"> 
    <br><br> 
    <input class="EUsubmit" type="button" value="Set New Password" onclick=""> 
    <br><br> 
</div> 

だから私は混乱しています。 CreateUser Tabを開いている場合は、そのタブが開いている間に必要なすべてのフィールドを作成する方法を教えてください。しかし、SetPasswordタブが開いている場合は、これらのフィールドをすべて作成し、CreateUserタブに必要なフィールドがないことを確認します。

ご協力いただきありがとうございます。

Answer 1

// get a reference to the active tab 
var aTab; 
var tabs = document.getElementsByClassName('tabcontent'); 
for(var i=tabs.length; i--;) if(tabs[i].classList.contains("active")) aTab = tabs[i]; 

if(aTab !== undefined){ 

    // we found the active tab, now we get the inputs 
    var inputs = aTab.getElementsByTagName("input"); 

    // check to make sure each is not empty 
    for(var i=inputs.length; i--;){ 
     if(inputs[i].value === ""){ 
      // something wasn't filled out.. do something.. 
     } 
    } 

} 

をやりたいの条件を挿入し、現在開いているタブ

var tab1 = $('.tab li a.tablinks:visible').attr('id'); 

のIDを取得します各タブのフォーム。

Answer 2

まずしかし、おそらく別々に使用することが容易になるだろうあなたが

if(tab1 == 'CreateUser') { 
// do something 
}