1
Ниже приведен мой код, как модальный, так и javascript, управляющий формой. Проверка не работает. Он возвращает, были ли выполнены требования проверки, однако при отправке ничего не происходит. У меня есть jquery и bootstrap ссылки в другом файле. Я использую laravel 4. Друзья, использующие тот же валидатор, работают, но нет никакой разницы в выполнении наших кодов.Проблемы с формой валидатора бутстрапа
Если я удаляю валидатор, форма работает в построенной форме. Я понятия не имею, что происходит здесь. Любая помощь будет оценена по достоинству.
<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>
Я также хотел бы отметить, что я очень новичок в кодировании. – hipkiss
Можете ли вы добавить свои включенные файлы? jquery, bootstrap .. и вы вызвали подтверждение для проверки подлинности бутстрапа? –
это плохо: включите его в вопрос, и комментарии rmeoves :)) –