带有错误/成功图标和工具提示的表单验证

Question

我需要验证表单上的输入字段。我需要一个错误/成功图标内的输入字段，和一个工具提示气泡与消息的右侧，但仅为错误输入。

我希望它看起来像这样:

Name: [some entry  (error/success icon)]

如果输入是有效的:

Name: [some entry  (success icon)]

如果输入无效:

Name: [some entry  (error icon)] <Toolip bubble with a message "Not valid"

我不知道怎样才能同时做到这两件事。

小提琴:https://jsfiddle.net/c6dhs0af/

Answer 1

你也可以尝试使用jquery插件，这可能有助于最好的jquery插件验证表单字段

<div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>

这里有一个关于小提琴的例子