Question

我有一个表单和一些JQuery来验证。它工作得很好，但我没有显示消息，而是想在这里显示一个图标。我尝试了一些东西，但没有成功。请帮忙。

HTML

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

JS

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

Answer 1

您可以使用CSS简单地显示一个图标，对于错误，标签被分配了一个类＆＃34;错误＆＃34; - 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 =＆＃34;有效＆＃34;，您可以复制并调整label.valid:after的css以上，并将复选标记图标设置为背景网址。如果有一个标签没有一个类，您可以使用复选标记作为背景调整label:after，并使用label.error:after调整background:url("your-error-icon.png") no-repeat !important;，以防万一在没有错误类的情况下添加标签将显示复选标记图标，如果带有错误类别的标签，将使用!important覆盖label的css来显示错误图标。

JQuery - 图标而不是消息验证

1 个答案: