Bootstrap form validation not working
I am trying to validate username and password field using bootstrap validator
I have included css and js for bootstrap validator.
form id to validate is #login
Code is as below
<head>
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css"/>
<script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/js/bootstrapValidator.min.js"></script>
<script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/css/bootstrapValidator.min.css"></script>
<script>
$(document).ready(function() {
$('#login').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
validators: {
notEmpty: {
message: 'User Name required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'TPassword required'
}
}
}
}
});
});</script>
</head>
<body>
<form action="login" method="post" id="login" >
<div class="form-group">
<label class="control-label" for="userName">
User Id
</label>
<input type="text" placeholder="Username" name="userName" id="userName" class="form-control lgn">
</div>
<div class="form-group">
<label class="control-label" for="Password">
Password
</label>
<input type="password" placeholder="Password" name="password" id="password" class="form-control lgn">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success lgn" >Login</button>
</div>
</form>
</body>
How to resolve this.
fiddle demo jsfiddle.net/xrcwrn/3bthv
Answer
The problem was that your js code contained in the fiddle contained syntax errors. The console should be the first thing you check when your javascript isn't working as expected. I commented in the code below what changes I made to get the fiddle to work. (It looks like the code in your question is fine though)
$(document).ready(function() {
$('#login').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
} /* <-- removed unneeded comma */
} /* <-- added closing brace */
});
});