BootstrapValidator do not submits form

Question

I have tried to use BootstrapValidator but for some reason, it does not submits the form unless I remove the JS script.

The JS Script is :

$(document).ready(function() {
    $('#loginForm').bootstrapValidator({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            pass: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'email',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
        }
    });
});

And my form:

 <div class="col-sm-4 col-sm-offset-5 col-md-4 col-md-offset-5 main">
 <h1 class="page-header">Please sign in</h1>
      <form id="loginForm" class="form-signin" action="ApplicantLogin.php" method="POST">
        <label for="inputEmail" class="sr-only">e-Mail</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="e-Mail" name="email" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" name="pass" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" name="loginbtn" value="login">Sign in</button>
      </form>

    </div> <!-- /container -->

I have changed the button name to a different than the default as the creator suggests, but still not working. Any ideas why? The validation work fine though.

Answer 1

Your form is not submitting because you don't have submit button. Add type="submit" to it.

<button type="submit" class="btn btn-lg btn-primary btn-block" name="loginbtn" value="login">Sign in</button>

Answer 2

I have tried the code you provided both in my localhost and in a fiddle and it works. I tried to insert the same fiddle here and the console shows this error:

bootstrap validator is not a function

For some reason it seems that the plugin is not loaded. Maybe it's what happens in your web. To solve it you can link the bootsrap validator library:

//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css


//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js

If the validator is working it should submit with the button that you have, and if you click with empty inputs it should display a message.

• Check the console log if the same error is recorded
• Check that jquery is correclty linked

This is the link to to the fiddle working