jQuery驗證插件組：錯誤消息顯示最後一個無效字段，而不是組中的第一個無效字段

Question

在jQuery validate插件中使用組時，出於某種原因，如果同時顯示組中最後一個字段的錯誤消息字段無效。理想情況下，它應該顯示組中第一個字段的錯誤消息，該字段無效。

下面的代碼：

<form id="form1"> 
    <div> 
     <label>Name</label> 
     <input type="text" name="firstName" id="firstName" /> 
     <input type="text" name="lastName" id="lastName" /> 
    </div> 
    <div> 
     <input type="submit" value="Test" /> 
    </div> 
</form> 

而且JS：

$(function() { 
    $('#form1').validate({ 
     messages: { 
      firstName: { 
       required: 'first name is required' 
      }, 
      lastName: { 
       required: 'last name is required' 
      } 
     }, 
     rules: { 
      firstName: { 
       required: true 
      }, 
      lastName: { 
       required: true 
      } 
     }, 
     groups: { 
      fullName: 'firstName lastName' 
     } 
    }); 
}); 

理想的情況下，提交按鈕點擊時，我想在以下情況下，發揮出：

1. 這兩個字段都是空的：「名字是必需的」
2. 名字fille d中，姓氏空：「是必需的姓氏」
3. 姓氏填寫，名字​​空：「第一名稱是必需的」

任何人都知道如何做到這一點？

我也在努力的另一個項目是，如果我使用「成功」函數來顯示一個「有效」的標籤，當用戶完成每個領域時，它似乎忽略了這些字段在組中。當組中的BOTH字段有效時，我只想顯示「有效」消息。

如果任何人都可以幫助解決這些問題中的任何一個，那就太棒了。

謝謝！

Answer 1

試試這個

$(function() { 
    $('#form1').validate({ 
     messages: { 
      firstName: { 
       required: 'first name is required' 
      }, 
      lastName: { 
       required: 'last name is required' 
      } 
     }, 
     rules: { 
      firstName: { 
       required: true, 
       lastName: { 
        required: true 
       } 
      } 
     }, 
     groups: { 
      fullName: 'firstName lastName' 
     } 
    }); 
});