weird error in bootstrapValidator in jsp with Bootstrap

Question

I am using 'bootstrapvalidator' to validate my form (registration and login modals of bootstrap). When ever I put the correct data in any of the modals say Login then the login button(submit the login form) gets disabled like the data is incorrect .but when i clear on digit from the password field and again enter it and try to submit the form it submits the form.

I don't know why this is happening and what is causing the error .

I am using cdns from https://cdnjs.com all cdn total in 8 cdn links.

My form code(modal login )

<div id="login" class="modal fade " role="dialog">
<div class="modal-dialog login-modal">
    <div class="modal-content">
        <form action="logindone.jsp" method="post" class="form-horizontal" role="form">
            <div class="modal-header">
                <a class="close cross" data-dismiss="modal">x</a>
                <h3>Login</h3>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="email-name" class="col-md-2 control-label  glyphicon glyphicon-user"></label>
                    <div class="col-md-10">
                        <input type="email" class="form-control" id="email-name" name="email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email-pass" class="col-md-2 control-label glyphicon glyphicon-lock"></label>
                    <div class="col-md-10">
                        <input type="password" class="form-control" id="email-pass" name="password">
                    </div>
                </div>
            </div>
            <div class="modal-footer modal-footer-hidden-border">
                <a href="#" class="btn btn-link" data-dismiss="modal">Forgot password ?</a>
                <button type="submit" value="submit" class="btn btn-danger btn-circle-lg glyphicon">Log in</button>
            </div>
        </form>
      </div>
   </div>
</div>

my bootstrap validator code

<script>
$(document).ready(function() {
  var validator = $('#login').bootstrapValidator({
    fields: {
      email: {
        message: "Email is required",
        validators: {
          notEmpty: {
            message: "Please provide an email address"
          },
          stringLength: {
            min: 6,
            max: 35,
            message: "Email must be between 6 and 35 characters long"
          },

          emailAddress: {
            message: "Email address must be valid"
          },
          regexp: {
            regexp: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: 'Not a valid email address'
          }

        }
      }, //.email
      password: {
        validators: {
          notEmpty: {
            message: "Password is required"
          },
          stringLength: {
            min: 8,
            message: "Password must be 8 characters long"
          },
          different: {
            field: "email",
            message: "Email and Password must be different"
          }
        }
      }
    }
  });
});
</script>

Answer 1

There is nothing much wrong with the code, only problem is here $('#login') you are targeting the modal id,

var validator = $('#login').bootstrapValidator({ //validation code });

you have to target the form selector Read How to call the plugin

so assign an id to form e.g id="loginForm" different then modal id.

<form action="logindone.jsp" id="loginForm" method="post" class="form-horizontal" role="form">

and bootstrapValidator code will be

var validator = $('#loginForm').bootstrapValidator({ //validation code });

Rest is all good

Working Fiddle Example