Bootstrap validator form plugin: how to change fee

问题:

The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.

Suppose I want to replace glyphicon with font awesome.

The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.

Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:

feedback: {
  success: 'fa-check',
  error: 'fa-times'
}

as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.

回答1:

After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):

<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>

Note the quotes syntax.

Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:

<span class="glyphicon form-control-feedback" aria-hidden="true"></span>

with:

<span class="fa form-control-feedback" aria-hidden="true"></span>

回答2:

This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:

 var validator = $('#submitForm').validate({ 
    validClass: "is-valid",
    errorClass: "is-invalid",

jQuery Validator