I have the 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 to 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 be 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 be 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 the bootstrapvalidator initialised like 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();
        // Get the form instance
        var oForm = $(e.target);
        oForms.submitForm(e, oForm);
    });

The defined validations work fine and the form can be submitted without issue.

if the server-side script that handles the form encounters an error (invalid password, too many login attempts, etc) it send a response containing a custom X-App-Whatever header containing a json object as below:

{
    "errors":{
         "username":[
             "Your username is invalid."
         ]
     },
 }

I have no issues accessing the data in the header and I'm really looking for the bootstrap validation options for attaching validation to form elements after the form has been posted.

As I am not sure what the server may plain about on any particular form submission, is there a clean way to trigger the error state on the field's bootstrap validator instance and inject the error message sent by the server into the popover that appears on the field that is in error?

I'm not sure the remote validation is the right choice as it requires that the validation type is predefined in the form.

I have the 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 to 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 be 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 be 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 the bootstrapvalidator initialised like 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();
        // Get the form instance
        var oForm = $(e.target);
        oForms.submitForm(e, oForm);
    });

The defined validations work fine and the form can be submitted without issue.

if the server-side script that handles the form encounters an error (invalid password, too many login attempts, etc) it send a response containing a custom X-App-Whatever header containing a json object as below:

{
    "errors":{
         "username":[
             "Your username is invalid."
         ]
     },
 }

I have no issues accessing the data in the header and I'm really looking for the bootstrap validation options for attaching validation to form elements after the form has been posted.

As I am not sure what the server may plain about on any particular form submission, is there a clean way to trigger the error state on the field's bootstrap validator instance and inject the error message sent by the server into the popover that appears on the field that is in error?

I'm not sure the remote validation is the right choice as it requires that the validation type is predefined in the form.

• javascript
• jquery
• ajax
• html

Share Improve this question Follow edited Sep 23, 2014 at 2:52 Terry asked Sep 23, 2014 at 2:45 TerryTerry 3311 silver badge44 bronze badges 1

• this is exactly the same issue I am looking for. Have you solved this? – DolceVita Commented Oct 17, 2014 at 6:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I just had the same problem.

Take a look at: http://bootstrapvalidator./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 is 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');
    })
});