如何在javascript中控制驗證

Question

我有一個用於註冊用戶的頁面。在該頁面中，我在兩個選項卡中劃分了字段。所有字段都是必需的。如果用戶沒有在第一個選項卡中輸入字段，我會在第二個選項卡中出現驗證錯誤，因爲它的單個頁面控制第二個選項卡的驗證。

<ul> 
<li>first tab</li> 
<li>second tab</li> 
</ul> 
    <div class="row setup-content" id="step-1"> //first tab 
<input class='form-control' id='username' required='required' name='username' placeholder='First Name*' type='text' data-error="Please enter name field."> 
<button id='next'>Next</button> 
</div> 

<div class="row setup-content" id="step-1"> //second tab 
    <input class='form-control' id='password' required='required' name='password' placeholder='Enter password' type='text' data-error="Please enter Password"> 
    </div> 

<script> 
$('#next').click(// code for moving to second tab); 
</script> 

如果我點擊下一步按鈕，而無需輸入用戶名，用戶名字段被突出顯示，並輸入用戶名，並單擊下一步按鈕移動到第二個選項卡後，密碼字段也強調，因爲錯誤造成的，而不是輸入用戶名。

在此先感謝

Answer 1

最快的解決方案是在disable fields內部隱藏tabs，一旦當前標籤爲filled and valid，切換到下一個標籤並重復該過程。

Answer 2

基本上驗證工作的樣子，每個變化，驗證一切，讓所有空字段出現無效。有一件事可以做：爲每個字段定義一個「pristine」屬性，在該字段第一次更改後將其設置爲false。通過這種方式，您可以排除未經過驗證的字段。

但是，這將阻止驗證»pristine«領域提交，所以你必須驗證每個案件。