輸入被禁用，直到之前的輸入填入

Question

當用戶登錄表單時，我想要做的是。我希望第一個輸入是活動的，所以用戶可以點擊，選擇或填寫。我希望他們一步一步地填寫表格，所以我希望下一個輸入只有在他們填寫完當前輸入後才能激活。

我也希望提交按鈕被取消激活，直到所有的輸入被填寫後才能被激活。

實現此目的的最佳方式是什麼？

我附上了一張圖片來說明我正在嘗試做什麼。

Answer 1

這可能會給你一個很好的起點：Fiddle

添加step類，每個表單元素的（我相信這個工作，他們需要彼此的兄弟姐妹）：

<form class="step-by-step"> 
    <!-- Start with only the first one enabled --> 
    <input type="text" class="step" id="step1" /> 
    <input type="text" class="step" id="step2" disabled /> 
    <input type="text" class="step" id="step3" disabled /> 
    <!-- Also works with selects, 
     as long as you keep track of IDs --> 
    <select id="step4" class="step" disabled> 
     <option value="">Choose one</option> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
    <select id="step5" class="step" disabled> 
     <option value="">Choose one</option> 
     <option value="europe">Europe</option> 
     <option value="america">America</option> 
    </select> 
</form> 

然後，使用next()功能找到的形式下一步當有新的變化，並禁用或啓用它（或所有接下來的步驟，如果該元素是空的）：

// The change event is fired when a form element loses focus 
// and its value has changed since the last time we interacted with it 
$('.step').change(function() { 
    var next_step = $(this).next('.step'); 
    var all_next_steps = $(this).nextAll('.step'); 
    // If the element *has* a value 
    if ($(this).val()) { 
     // Should also perform validation here 
     next_step.attr('disabled', false); 
    } 
    // If the element doesn't have a value 
    else { 
     // Clear the value of all next steps and disable 
     all_next_steps.val(''); 
     all_next_steps.attr('disabled', true); 
    } 
}); 

對於TAB功能，以下是一個快速修復，我敢肯定可以以某種方式與上述功能集成。

$('.step').keydown(function(event) { 
    // If they pressed tab AND the input has a (valid) value 
    if ($(this).val() && event.keyCode == 9) { 
     $(this).next('.step').attr('disabled', false); 
    } 
}); 

Answer 2

幾件事情要考慮：

表格可以通過點擊一個類型=「提交」或返回鍵按鈕提交。 。

所以，爲了讓您達到預期的效果：

1. $（ 「形式」）找到（ 「輸入：第一」）專注（）。 //自動對焦第一個輸入字段。
2. 確保所有輸入都具有「tabindex」屬性，以便用戶可以使用選項卡循環。
3. JavaScript必須禁用表單動作，直到用戶通過驗證。