JQuery - 圖標而不是消息驗證

我有一個窗體和一些JQuery行來驗證。它工作得很好，但我不想顯示消息，而是想在這裏顯示一個圖標。我嘗試了一些，但沒有成功。請幫忙。JQuery - 圖標而不是消息驗證

HTML

<form method="POST" id="TestForm"> 
    <input name="txtIn" type="text" id="txtIn"><br /> 
    <p></p> 
    <button id="submit">Submit</button> 
</form>

$('#TestForm').validate({ 
    rules:{ 
     txtIn:{ 
      required: true, 
      rangelength:[8,16] 
     } 
    }, 
    messages: { 
     txtIn:{ 
      required: "Please enter something", 
      rangelength: "An error icon is here" 
     } 
    } 
});

來源

2014-10-11 abcid d

可以使用CSS，作爲一個錯誤的標籤分配一個類「錯誤」僅僅顯示一個圖標 - Fiddle

label.error:after { 
    content:""; 
    display: inline-block; 
    margin-left:10px; 
    background: url("http://dummyimage.com/15x15/de1417/de1417.png") no-repeat; 
    width: 15px; 
    height: 15px; 
}

如果您只想顯示一個圖標而不是錯誤消息，只需將rangelength值messages保留爲空 - Fiddle僅包含圖標。

更新：對於評論中的後續問題如何顯示第二個圖標，例如，一個複選標記，如果格式正確 - 我只是試圖在小提琴中得到正確的驗證，但它在那裏不起作用（但它應該適用於您的實現）。所以我不確定在正確驗證的情況下是否有任何特定的類設置爲標籤，以及是否爲輸入添加了標籤。如果您使用Web開發人員工具檢查是否爲有效字段添加了任何標籤以及是否爲此標籤設置了任何類，那麼提供任何有效信息會更容易。如果有一個標籤，例如class =「valid」，你可以複製並調整上面的css爲label.valid:after，並將複選標記圖標設置爲背景url。如果有一個而沒有類別的標籤，您可以調整label:after並選中對號作爲背景，並調整label.error:after和background:url("your-error-icon.png") no-repeat !important;，以便在沒有錯誤類別的情況下添加標籤時，將顯示覆選標記圖標將使用!important來顯示錯誤類爲error-icon的標籤覆蓋label的css。

來源

2014-10-11 22:41:15

@ Matthias，哇，它工作的很棒。非常感謝！這讓我擔心另一個問題，如果輸入是正確的格式，如何顯示另一個圖標（如複選標記）。 – 2014-10-11 23:10:48

@abcidd很高興它爲你工作，雖然它可能是一種解決方法。我沒有在驗證文檔中找到關於顯示圖標而不是消息的選項的任何內容，因此只是將此答案作爲建議。對於複選標記問題，我剛更新了我的答案。 – 2014-10-11 23:33:32

@ Matthias，非常感謝！我認爲如果我們有'label.error：after'，我們不需要'errorPlacement：function（error，element）{....'沒有這個語法，錯誤圖標仍然顯示！並非常感謝你的建議'class =「valid」'。這是一個很好的方法。我正在努力，但不知怎的，我還沒有把它做好。請看看我的新問題[這裏http://stackoverflow.com/questions/26325789/jquery-showing-wrong-and-right-icons-for-validation] – 2014-10-12 14:00:22

JQuery - 圖標而不是消息驗證

回答

相關問題