下面是我的代码，包括控制表单的模式和 javascript。验证不起作用。它返回是否满足验证要求，但是提交时什么也没有发生。我在另一个文件中有 jquery 和 bootstrap 链接。我正在使用 laravel 4。 使用相同验证器的 friend 可以正常工作，但我们代码的执行没有差异。
如果我删除验证器，表单将以构造的方式工作。我真的不知道这里发生了什么。任何和所有帮助将不胜感激。
<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>
最佳答案
你的代码不对，在 head 标签中包含所有的 js 和 css 文件，并且包含顺序很关键:首先包含 jquery 库，然后是 bootstrap，然后是验证器的插件
<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>
另外你的html有错误
<button type="button submit" class="btn btn-primary" form="login_form">Submit</button>
必须是:
<button type="submit" class="btn btn-primary" form="login_form">Submit</button>
此外，您以后最好注意名称冲突。有关详细信息，请参阅: http://bootstrapvalidator.com/getting-started/#name-conflict
关于javascript - Bootstrap 验证器表单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25763871/