2015-04-20 138 views
0

我有一個模式boostrap。我想在boostrap模式下顯示驗證錯誤。但I`ve幾個difficults爲使其顯示錯誤驗證上bootpal模式

我的語氣

<!-- 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."]}} 

我怎麼能顯示我的表格模式的錯誤。我有一點困惑,要表現出來。

+0

首先在html模板中顯示錯誤(如果errors-> any().....),在編輯你的ajax請求之後,並且在請求之後添加$('#myModal').modal('show')成功 –

+0

不工作。我嘗試它 – mangulom

回答

3

這種替換成功的其他部分在阿賈克斯

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,而附加。