我'获得了Bootstrap Modal,允许用户更新他的密码:
<div class="modal fade" id="settingModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Change Password</h4>
</div>
{!! Form::open(array('url' => '/users/updatePassword', 'method' => 'POST', 'id'=>'passUpdate')) !!}
<div class="modal-body">
@if(Session::has('error'))
<div class="alert-box success">
<h2>{{ Session::get('error') }}</h2>
</div>
@endif
<div id="password-group" class="form-group has-feedback @if ($errors->has('password')) has-error @endif">
{!! Form::password('password', array('id'=>'password', 'class' => 'text input form-control', 'placeholder'=>'New Password')) !!}
<span class="glyphicon glyphicon-lock form-control-feedback @if ($errors->has('password')) has-error @endif"></span>
@if ($errors->has('password')) <p class="help-block">{{ $errors->first('password') }}</p> @endif
<div id ="password_error"></div>
</div>
<div id="password_confirmation-group" class="form-group has-feedback @if ($errors->has('password_confirmation')) has-error @endif">
{!! Form::password('password_confirmation', array('id'=>'password_confirmation', 'class' => 'text input form-control', 'placeholder'=>'Confirm New Password')) !!}
<span class="glyphicon glyphicon-lock form-control-feedback @if ($errors->has('password_confirmation')) has-error @endif"></span>
@if ($errors->has('password_confirmation')) <p class="help-block">{{ $errors->first('password_confirmation') }}</p> @endif
<div id ="password_confirm_error"></div>
</div>
</div>
<div class="modal-footer clearfix">
<button type="button" class=" pull-left btn btn-default btn-flat" data-dismiss="modal">Close</button>
{!! Form::submit('Submit', array('class'=>' pull-right btn btn-primary btn-flat'))!!}
</div>
{!! Form::close()!!}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
这是我的JS代码:
<script type="text/javascript">
$('#passUpdate').submit(function(e){
var $form = $(this);
e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
var url = $form.attr('action');
var formData = {};
//submit a POST request with the form data
$form.find(':input').each(function()
{
formData[ $(this).attr('name') ] = $(this).val();
console.log($(this).val());
});
console.log('Before Submit');
//submits an array of key-value pairs to the form's action URL
$.post(url, formData, function(response) {
//handle successful validation
console.log("Success");
}).fail(function(response) {
//handle failed validation
console.log("Failed");
associate_errors(response['errors'], $form);
});
});
function associate_errors(errors, $form)
{
//remove existing error classes and error messages from form groups
$form.find('.form-group').removeClass('has-errors').find('.help-text').text('');
errors.foreach(function(value, index)
{
//find each form group, which is given a unique id based on the form field's name
var $group = $form.find('#' + index + '-group');
//add the error class and set the error text
$group.addClass('has-errors').find('.help-text').text(value);
}
}
这是我的laravel控制器的一部分:
$validator = Validator::make($data, $rules);
if ($validator->fails()){
// If validation fails redirect back to login.
return Response::json(array(
'fail' => true,
'errors' => $validator->getMessageBag()->toArray()
));
}
所以我遇到了这个问题:
NB Laravel正确返回JSON响应。
更新我已修复问题的第一部分,现在我的表单已提交并且已收到JSON响应,但表单验证无效,错误未显示在模态上。
答案 0 :(得分:2)
您错过了)
的{{1}}:
foreach
注意上面的第二行。
});