jQuery驗證 - 在文本字段中顯示錯誤消息

我正在爲我的客戶端構建一個簡單的窗體，他們希望在文本字段中顯示錯誤消息。這可以通過jQuery的驗證插件實現嗎？jQuery驗證 - 在文本字段中顯示錯誤消息

謝謝！

2013-03-01 JungleJap

哈哈..關閉結束的問題的答案..;） – Fr0zenFyr 2013-03-01 10:58:57

在您的表單域中使用佔位符文本。對於驗證錯誤，在字段中顯示消息並不是個好主意，而是突出顯示字段並在字段旁邊顯示錯誤。 – Fr0zenFyr 2013-03-06 08:46:31

是的，當您驗證文本字段並且發現錯誤時，您可以簡單地將錯誤信息指定爲該文本字段或佔位符的值。

$("#yourtextfield").val("This field can't be empty.");

來源

2013-03-01 10:50:13

如何用OP的插件做到這一點？ – Sparky 2013-03-01 17:42:26

是的，你可以。你的技能看起來很原始。

讓我們走簡單的路徑，因爲您的問題聽起來很簡單。出錯時，給出條件將消息字符串作爲值分配給輸入字段。

像

var err = "err_msg";

$('#elementId').val(err);

請參閱部分.val('value')在http://api.jquery.com/val/

來源

2013-03-01 10:56:29 Fr0zenFyr

報價OP：

「他們希望在文本字段中顯示錯誤消息。這會有可能與jQuery的驗證插件來實現這一目標？」

是的，這是可能使用插件的errorPlacement回調函數/選項。

NO，我絕不會去做。這使得用戶幾乎不可能正確地與表單進行交互，錯誤消除了用戶已經輸入的任何數據，並且用戶必須刪除該消息的文本以輸入他們的數據，我相信你可以想到聰明的方式爲了克服這些問題，但IMO，從UI的角度來看這是一個非常糟糕的設計。向客戶展示您的客戶this demo，然後向下滾動並顯示它們my second demo。

DEMO：http://jsfiddle.net/6fUTV/

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     // rules & options, 
     errorPlacement: function(error, element) { 
      element.val(error.text()); 
     } 
    }); 

});

編輯：相反，你可以使用placeholder屬性。該消息仍然會在輸入元素的之內，但它不會被視爲value，因此它不會干擾用戶交互。但是，這種方法的一個很大的缺點是，如果你有一個規則來驗證數據格式，如email,minlength等......用戶永遠不會看到驗證消息，因爲有一個值位於字段內佔位符的頂部！

errorPlacement: function(error, element) { element.attr("placeholder", error.text()); }

DEMO 2：http://jsfiddle.net/n5saemj7/

備選方案：使用消息

顯示錯誤氣泡：http://jsfiddle.net/kyK4G/

更多信息：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

來源

2013-03-01 17:40:56 Sparky

感謝您的輸入。您的評論對於說服我的客戶不要在該字段中顯示錯誤消息非常有用。是的，我非常基本的JavaScript。我必須坐下來學習它：（ – JungleJap 2013-03-04 12:05:07

+ 1.你的第一個小提琴有點兒有趣，不可能刪除錯誤信息輸入所需的信息。我想我的答案在這種情況下效果更好，儘管你的第二個小提琴但這並不是OP提出的問題，幸運的是你的假設是有效的。對於我的回答的倒退 - 我明確提到這是簡單問題的簡單解決方案。順便說一下，這似乎是另一個被遺棄的解決方案 @JungleJap：開始接受解決問題的答案，否則，人們將不再回答您的問題。 – Fr0zenFyr 2013-03-06 08:39:55

@ Fr0zenFyr，thank-you。我的第一個jsFiddle只是爲了證明他的請求沒有任何意義，以說明原因。有幾個笨拙的解決方法可以讓它變得更好一點，但是我選擇將它們留給s Ame的原因......我清楚地指出，將錯誤放在元素中是一個非常糟糕的設計。 – Sparky 2013-03-06 14:57:20

他們告訴你，這是一個不好的方法，也許是。

但是你可以使用佔位，已經代替更換內容，只是改變這一點：

errorPlacement: function(error, element) { 
    element.val(error.text()); 
}

對於這一點：

errorPlacement: function(error, element) { 
    element.attr("placeholder",error.text()); 
}

希望，幫助你，多保重！

來源

2014-03-26 18:33:56 DarkteK

欲瞭解更多清晰** [jsfiddle]（http://jsfiddle.net/prashantptapase/6fUTV/36/）** – 2014-07-23 10:17:21

這將工作很好，當唯一的規則是'required'。然而，這種方法的一個很大的缺點是，如果你有一個規則來驗證數據格式，比如'email'，'minlength'等等，用戶將永遠不會看到錯誤信息。 – Sparky 2015-01-26 22:57:24

jQuery驗證 - 在文本字段中顯示錯誤消息

回答

相關問題