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 - 图标而不是消息验证

回答

相关问题