javascript - Adding and triggering a bootstrapvalidator on result from ajax query -

i have following login form :

<form accept-charset="utf-8" class="form-horizontal" id="login_form" action="/login.json" method="post" data-validate="true"> <div class="content">     <h4 class="title">login appname</h4>     <div class="form-group">         <div class="col-sm-12">             <div class="input-group">                 <span class="input-group-addon"><i class="fa fa-user"></i></span>                 <input type="text" placeholder="username" id="username" name="username" class="form-control"                        required data-bv-notempty-message="username must not empty."                        maxlength="255" data-bv-stringlength-message="username cannot exceed 255 characters.">             </div>         </div>     </div>     <div class="form-group">         <div class="col-sm-12">             <div class="input-group">                 <span class="input-group-addon"><i class="fa fa-lock"></i></span>                 <input type="password" placeholder="password" id="password" name="password" class="form-control" required data-bv-notempty-message="username must not empty." maxlength="255" data-bv-stringlength-message="username cannot exceed 255 characters.">             </div>         </div>     </div> </div> <div class="foot">     <button class="btn btn-primary" data-dismiss="modal" type="submit"><span class="fa fa-user"> </span> log me in</button> </div> 

with bootstrapvalidator initialised this:

    var oscope = $(oform).is('form') ? oform.parent() : null;     $('form[data-validate="true"]', oscope).bootstrapvalidator({         container: 'popover',         excluded: [':disabled', ':hidden', ':not(:visible)'],         feedbackicons: {             valid:      'glyphicon glyphicon-ok',             invalid:    'glyphicon glyphicon-remove',             validating: 'glyphicon glyphicon-refresh'         },         live: 'enabled'     }).on('success.form.bv', function(e) {         // prevent form submission         e.preventdefault();         // form instance         var oform = $(e.target);         oforms.submitform(e, oform);     }); 

the defined validations work fine , form can submitted without issue.

if server-side script handles form encounters error (invalid password, many login attempts, etc) send response containing custom x-app-whatever header containing json object below:

{     "errors":{          "username":[              "your username invalid."          ]      },  } 

i have no issues accessing data in header , i'm looking bootstrap validation options attaching validation form elements after form has been posted.

as not sure server may complain on particular form submission, there clean way trigger error state on field's bootstrap validator instance , inject error message sent server popover appears on field in error?

i'm not sure remote validation right choice requires validation type predefined in form.

i had same problem.

take at: http://bootstrapvalidator.com/api/#update-status

example:

$form.bootstrapvalidator({     fields: {          email: {             validators: {                 notempty: {                     message: 'please enter email'                 },                 emailaddress: {                     message: 'invalid email'                 },                 callback: {                     message: "the email address doesnt exist or inactive"                 }             }         }     } }) .on('success.form.bv', function(e) {    .preventdefault();      var $form = $(e.target);     var bv = $form.data('bootstrapvalidator');      $.post($form.attr('action'), $form.serialize())     .success( function(msg) {          // great success      })     .fail( function(xhr, status, error) {         bv.updatestatus('email', 'invalid', 'callback');     }) });