Below is my code, both modal and javascript controlling the form. The validation doesnt work. It returns whether or not the validation requirements have been met however on submitting nothing happens. I have the jquery and bootstrap links in another file. I am using laravel 4. Friends using the same validator have it working but there is no difference in execution of our codes.
If i remove the validator, the form works in the constructed fashion. I have literally no idea whats going on here. Any and all help would be appreciated.
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
</head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<div class="modal fade" id="login_popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><!--Login Popup-->
<div class="modal-dialog">
<div class="modal-content form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="btn btn-danger btn-sm glyphicon glyphicon-remove pull-right" data-dismiss="modal"><span class="sr-only">Close</span>
</button>
<h4 class="modal-title text-inverse" id="myModalLabel">Login</h4>
</div>
<div class="modal-body form-group">
<form method="post" class="form-horizontal" id="login_form" action="{{ URL::route('account-login-post') }}" role="form">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="form-group">
<label for="input_email" class="col-sm-3 control-label text-inverse">Username:</label>
<div class="col-sm-6">
<input class="form-control" id="input_email" type="text" name="user_name" placeholder="Username" {{ (Input::old('username')) ? ' value="'. e(Input::old('username')) . '"' : ''}}>
{{ $errors ->first('username') }}
</div>
</div>
<div class="form-group">
<label for="input_password" class="col-sm-3 control-label text-inverse">Password:</label>
<div class="col-sm-6">
<input class="form-control" id="input_password" type="password" name="password" placeholder="Password">
{{ $errors ->first('password') }}
</div>
</div>
<div class="form-group">
<label for="input_remember_me" class="col-sm-3 control-label text-inverse">Remember Me:</label>
<div>
<input type="checkbox" name="input_remember_me" id="input_remember_me">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button submit" class="btn btn-primary" form="login_form">Submit</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#login_form').bootstrapValidator({
container: 'tooltip',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
user_name: {
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 3,
message: 'The username must be more than 3 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
callback: {
message: 'The password is not valid',
callback: function(value, validator, $field) {
if (value === '') {
return true;
}
// Check the password strength
if (value.length < 7) {
return {valid: false,
message: 'It must be more than 7 characters long'
}
}
// The password doesn't contain any uppercase character
if (value === value.toLowerCase()) {
return {valid: false,
message: 'It must contain at least one upper case character'
}
}
// The password doesn't contain any uppercase character
if (value === value.toUpperCase()) {
return {valid: false,
message: 'It must contain at least one lower case character'
}
}
// The password doesn't contain any digit
if (value.search(/[0-9]/) < 0) {
return {valid: false,
message: 'It must contain at least one digit'
}
}
return true;
}
}
}
}
}
});
// i give up!! The validator is on crack :-)
//ill try a different version of the validator then :/
});
</script>
Your code is not right, include all js and css files in the head tag, and include order is critical: first include jquery library, next bootstrap, next plugin for validator
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
</head>
Also you have an error in your html
<button type="button submit" class="btn btn-primary" form="login_form">Submit</button>
Must be:
<button type="submit" class="btn btn-primary" form="login_form">Submit</button>
Also you'd better be aware of name conflict, in the future. See for more details: http://bootstrapvalidator.com/getting-started/#name-conflict