在bootstrap模式上显示错误验证

Question

我有一个模态的boostrap。我想在boostrap模态上显示验证错误。但是我有几个难以实现的目标

我的模态

<!-- Modal -->
        <div class="modal fade" id="box-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><!-- Aqui va el titulo de la pagina modal -->@yield('modal_title')</h4>
                    </div>
                    <div class="modal-body">
                         @yield('modal_body')
                        <div class="alert hidden" id="modal-alert"></div>
                        <!--Aqui va el cuerpo de la página modal -->


                    </div>
                    <div class="modal-footer">
                    <!-- Aquí va el pie de la pagina modal -->
                    @yield('modal_footer')
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin de Modal -->

我在模态的主体上显示一个表单

 {{ Form::open(array('id' =>'formuser-create', 'role' => 'form', 'class' => 'form-horizontal')) }}
            <div class="form-group">
                {{ Form::label('inputuser', 'Nombre de usuario', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::text('inputuser','', array('placeholder' => 'Introduce la contraseña...', 'class' => 'form-control input-md')) }}   
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inputpassword', 'Contraseña', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::password('inputpassword','', array('placeholder' => 'Introduce la contraseña...', 'class' => 'form-control input-md')) }}
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inputpassword1', 'Confirmar constraseña', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::password('inputpassword1','', array('placeholder' => 'Vuelve a introducir la contraseña...', 'class' => 'form-control input-md')) }}
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inputemail', 'Email', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::text('inputemail','', array('placeholder' => 'Introduce el email...', 'class' => 'form-control input-md')) }} 
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('es_admin', '¿Es administrador?', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::checkbox('es_admin','1') }}
                </div>
            </div>

@stop
@section('modal_footer')
<div class='form-group text-center' id='editor-actions'>
    {{ Form::submit('Guardar', ['class' => 'btn btn-success']) }} 
    {{ Form::reset('Limpiar', ['class' => 'btn btn-primary']) }}
    {{ Form::close() }}  
</div>

我的控制器

//Rutas del sistema
Route::Controller('users','UsersController');

创建添加用户的方法

//metodo para agregar al usuario
    public function postCreate()
    {
        //validamos reglas inputs
        $rules = array(
          'inputuser' => 'required|max:10',
          'inputpassword' => 'required|min:8',
          'inputpassword1' => 'required|min:8',
          'inputemail' => 'required|email|unique:users,email'
        );

        $validation = Validator::make(Input::all(), $rules);
        //Si no pasa la validacion
        if($validation->fails())
        {
            //Obtenemos los mensajes de error de la validation
            $messages = $validation->messages();
            //Redireccionamos a nuestro formulario de atras con los errores de la validación 
            if(Request::ajax())
            {
                return Response::json(array('errors' => $messages));
            }
            else
            {
                return Redirect::back()->withInput()->withErrors($validation);
            }
        }
        //Si todo ha ido bien guardamos
        $password = Input::get('inputpassword');
        $user = new User;
        $user->username = Input::get('inputuser');
        $user->password = Hash::make($password);
        $user->email = Input::get('inputemail'); 
        $user->admin = (Input::get('es_admin') == '1') ? 1 : 0;

        //guardamos
        $user->save();

        //redirigimos a usuarios

        return Redirect::to('admin/users.index')->with('status','ok_create');

    }

我的main.js javascript文件，我用ajax调用我的控制器方法。并且给了我一个json回复。

$("document").ready(function()
{
   $("#formuser-create").submit(function()
   {
      event.preventDefault();
      var form = $(this);
      $.ajax({
         url: 'users/create',
         dataType:'json',
         data: form.serialize(),
         type: "POST", 
         success: function(response)
         {
             if(response.success)
             {
                 alert("ok!");
             }
             else(response.error)
             {
                 alert(response['errors']);
             }
         },
         error: function(xhr, textStatus, thrownError)
         {
             console.log(xhr.status);
             console.log(thrownError);
             console.log(textStatus);
         }
      });
   }); 
});

我的json在验证失败时得到

{"errors":{"inputuser":["The inputuser field is required."],"inputpassword":["The inputpassword field is required."],"inputpassword1":["The inputpassword1 field is required."],"inputemail":["The inputemail field is required."]}}

如何在表单模式中显示错误。我有点兴奋地表现出来。

Answer 1

在ajax

中替换你成功的其他部分

else if(response.errors)
{
      $.each(response.errors, function( index, value ) {
        $("input[name='"+index+"']" ).css('border-color: #a94442;');
        $("input[name='"+index+"']" ).parent().append(value[0]);
      });
}

您可以在追加时修改错误消息css。