HTML5瀏覽器驗證-1個表單，2個按鈕，需要更改驗證

Question

我有一個帶有兩個按鈕的表單-一個是表單末尾的“提交”按鈕，在表單中間，我有一個“添加”按鈕，該按鈕使用Javascript在每次單擊時在表單內添加隱藏的輸入元素。

這是兩個輸入字段/添加按鈕：

<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>

然后是另一組輸入字段：

<input name="title" required>
<button type="submit">Submit</button>

這些都是一種形式。

我希望在單擊“添加”（而不是“標題”字段）時在“名稱”和“電子郵件”字段上觸發HTML5瀏覽器驗證，並在“標題”字段（而不是“名稱”上）觸發瀏覽器驗證和“輸入”字段），然后點擊“提交”。 有什么辦法可以做到這一點？

Answer 1

您可以將屬性“必需”添加或刪除到您需要的字段

                $('#field_id').attr('required','true');
                $('#field_id').removeAttr('required');

Answer 2

我看到的唯一方法是在點擊時動態設置required屬性（或屬性）。

或者，您可以添加和刪除invalid事件的事件偵聽器，這些事件偵聽器似乎抑制了本機的“丟失” /“格式錯誤”通知-即使它們不執行任何操作（例如preventDefaultAction左右）。

我還嘗試了帶有formnovalidate屬性的按鈕，並在當選元素上手動執行checkValidity() ，但是即使觸發“無效”事件，也不會顯示任何本機對話，並且提交也不會被取消。 （用歌劇測試了一切）

Answer 3

首先，您是否有任何特定原因想要使用HTML5來驗證表單？ 我覺得使用Java腳本可以輕松實現所需的功能，並且您注意到添加按鈕無論如何都將使用javascript。 此外，為什么您的表單驗證會以這種奇怪的方式進行分區？

我什至不喜歡HTML5驗證。 例如，如果您在HTML5電子郵件輸入中鍵入“ asdf @ 1”，它將接受它。 現在，您可以提出一個論點，即從技術上講這是一個有效的電子郵件地址，但我認為實際上大多數人都同意他們不會接受該地址為有效的電子郵件地址。 您可以使用IP地址代替域，但是我非常懷疑您可以將其用作電子郵件登錄任何現代網頁。

但是我離題了。 要回答您的問題，您可以使用JQuery編寫一個快速函數，該函數將基於單擊哪個按鈕來覆蓋表單驗證。 您可以通過捕獲HTML5驗證針對該特定輸入拋出的“無效”錯誤並返回false來解決該問題，來實現此目的。 因此，當您單擊“提交”時，您可以覆蓋名稱和電子郵件表單驗證，對於單擊“添加”按鈕而言，反之亦然。 同樣，我不知道您為什么要這樣做，但這是一個解決方案。