jquery驗證 - 當不需要的正則表達式驗證發生時，容器不會隱藏

我有jquery驗證工作，以便驗證發生時，錯誤將被放入容器而不是內聯。jquery驗證 - 當不需要的正則表達式驗證發生時，容器不會隱藏

我遇到了一些我的非必填字段問題。有關代碼，請參閱下面的jsfiddle。這裏是一個簡要概述：

名稱：必填字段
評論：必填字段
網址：不是必需的，但類=「URL」，以確保有效的URL
電子郵件：不是必需的，但類=「郵件」到確保有效的電子郵件

重現：
輸入值富到電子郵件字段或URL字段和標籤關閉
你會得到「電子郵件是無效的」錯誤預期。
返回到現場，並清除出去，標籤關閉
錯誤就會消失，但錯誤的容器仍然存在（你可以看到紅色的輪廓線在頂部）

似乎對正則表達式類型驗證，如果該字段不是必需的，當沒有值時，它不會重置爲忽略驗證。如果我進去並實際修復錯誤，例如，製作電子郵件[email protected]，那麼一切正常。

如何驗證接受空白值作爲非必填字段的有效性？

的jsfiddle鏈接： http://jsfiddle.net/tjans/napf7/

來源

2012-07-31 tjans

我已經更新了一些標記，更緊密地與我正在努力實現的jsfiddle。我有一個解決方法，基本上只是將「更改」事件附加到電子郵件字段並檢查多少個可見div（可見div =錯誤），如果長度爲0，則隱藏errorLabelContainer。這並不完美，並且仍然存在一個小故障，在它離開現場之前它不會真正隱藏，所以我仍然希望找到一個更好的解決方案。希望演示更新激發人們的注意力。 – tjans 2012-08-01 13:49:16

我已經嘗試了幾個事件 - keyup，unighighlight等做一些可見的div，但是他們都沒有工作，因爲他們都認爲事件運行時有一個可見的div。然後，當一切都完成後，我可以做一個控制檯查詢有多少個可見的div，它顯示0 ...這是一個計時問題。 – tjans 2012-08-03 14:33:19

我也聯繫了插件的作者，但我不希望得到迴應。我確信他是個忙碌的人，或者我的電子郵件被他的垃圾郵件過濾器或其他東西所吸引。 – tjans 2012-08-03 14:33:45

可以覆蓋showErrors方法來提供自己的功能。爲標準行爲調用defaultShowErrors。我編寫了一個快速版本，用於檢查錯誤對象散列中的任何錯誤，並有條件地顯示或隱藏容器。 Try it out。如果您使用此解決方案，您可能還希望檢查對象枚舉hasOwnProperty。

$("#commentForm").validate({ 
    wrapper: 'div', 
    showErrors: function(errors){ 
     var hasErrors = false; 
     for (var e in errors){ 
      hasErrors = true; 
      break; 
     } 

     if(hasErrors) $(this.settings.errorLabelContainer).show(); 
     else $(this.settings.errorLabelContainer).hide(); 

     this.defaultShowErrors(); 
    }, 
    errorLabelContainer: '#jserror' 
});

來源

2012-07-31 22:19:22

這似乎還有點奇怪 - 如果您填寫不正確的電子郵件，請提交表單，填寫名稱/評論，然後在字段中上下拖動幾次，由於某種原因它隱藏/顯示errorLabelContainer ... – Ryley 2012-07-31 22:46:42

這是我期待的那種solutin（並且在來到SO之前嘗試過自己，但無法工作）。這似乎應該工作。我想知道爲什麼隨機隱藏/顯示的事情發生。 – tjans 2012-08-01 11:50:19

使用errorClass

的jQuery：

$(document).ready(function(){ 
    $("#commentForm").validate({ 
     wrapper: 'div', 
     errorLabelContainer: '#jserror', 
     errorClass: 'errorClass' 
    }); 
    });

然後移動border CSS規則的錯誤類。風格必要

#jserror { 
    display:none; 
} 
.errorClass 
{ 
    border:1px solid red; 
}

DEMO

來源

2012-07-31 22:24:01 kei

這似乎適用於我的jsfiddle方案，但是當您遇到多個錯誤（例如，url和電子郵件）時，它會在每個錯誤周圍放置一個邊框。我必須看看這是否可以在容器本身上工作，而不是每個錯誤項目。 – tjans 2012-08-01 02:29:09

此外，如果您查看我的示例中的代碼或螢火蟲中的代碼，您會看到錯誤從未真正消失......該電子郵件錯誤仍然位於標記中，因此某些內容未被清除修復錯誤後退出。 – tjans 2012-08-01 02:41:19

其實，做一個錯誤計數和/或看着螢火蟲，似乎錯誤永遠不會消失，即使對於常規的「必需字段」錯誤，所以這可能不是一個好的測試。 – tjans 2012-08-01 02:50:24

使用unhighlight在驗證插件部分。

入住此的jsfiddle http://jsfiddle.net/napf7/44/

來源

2012-08-02 06:31:46

我正要快樂起來，但這也會隱藏其他領域的驗證。點擊空表格提交。爲電子郵件輸入foo1，爲url輸入foo2。您應該顯示3個錯誤...然後刪除電子郵件和網址的值，並且它會隱藏容器，即使名稱仍然無效。我敢肯定，儘管我可以使用unhighlight來檢查錯誤，然後隱藏... jsfiddle，如果我可以做到這一點。 – tjans 2012-08-03 04:20:19

你需要檢查太.. http://jsfiddle.net/napf7/49/ ..但我不認爲它是一個很好的方法，因爲如果你的表單包含大量的輸入字段，那麼你需要檢查每個案例手動.. – 2012-08-03 04:27:32

謝謝，但我不認爲這是一個合適的，動態的解決方案。一定有更好的方法... – tjans 2012-08-03 14:33:04

jquery驗證 - 當不需要的正則表達式驗證發生時，容器不會隱藏

回答

相關問題