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

Question

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

我希望它看起来像这样:

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

如果条目有效:

Name: [some entry  (success icon)]

如果输入无效:

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

我不知道如何同时完成这两件事。

fiddle :https://jsfiddle.net/c6dhs0af/

Answer 1

您也可以尝试使用 jquery 插件，这可能会有所帮助 Best jQuery plugin to validate form fields

<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>

这是一个例子working在 fiddle 上