Bootstrap modal, jquery, ajax表单验证和数据库插入

Question

我试图使用一个引导模式，与实时电子邮件检查和验证最后db插入。我看了几个教程，但不能把它们都放在一起。我没有js技能。我有一个模态表单提交和验证正常的laravel方式。唯一的问题是，如果它有错误，我们看到的消息在页面刷新，而不是在模态。(

我已经添加了一些ajax的东西，我看到在一个帖子，使我的表单提交数据到数据库没有刷新。:)但是，我无法弄清楚如何正确地返回错误和插入成功消息。到目前为止，唯一有效的错误是必需字段，颜色编码为红色，但没有显示任何消息。

我想要实现的是这个但是在模态教程中

这是我到目前为止的代码:

形式

{{ Former::open('admin/staff/create_staff', 'POST')->rules(User::$rules)->id('add_staff'); }} 
{{ Former::token();}}
{{ Former::text('f_name','First Name')->required(); }}
{{ Former::text('l_name','Last Name')->required(); }}
{{ Former::text('username','Username'); }}
{{ Former::text('user_number','User number')->required(); }}
{{ Former::text('email','Email')->required(); }}
{{ Former::password('password','Password')->required(); }}
{{ Former::select('gender','gender')->options(array('man'=>'male','female'=>'female'))->placeholder('Select Gender')->required() }}
{{ Former::select('contractor','contractor')->fromQuery(Contractor::all(), 'contractor', 'contractor')->placeholder('Select Contractor')->required(); }}
{{ Former::select('campus','campus')->fromQuery(Campus::all(), 'campus', 'campus')->placeholder('Select Campus')->required(); }}
{{ Former::select('status','status')->options(array('1'=>'Active','0'=>'In-active'))->placeholder('Select Status')->required() }}
{{ Former::actions (Former::large_primary_submit('Submit')->id('sub'),Former::large_inverse_reset('Reset')->id('clear')) }} 
{{ Former::close() }}  

控制器:

if(Request::ajax()) {
            $rules = [
                'f_name'        => 'required',
                'l_name'        => 'required',
                'user_number'   => 'required',
                'email'         => 'required|email',
                'gender'        => 'required',
                'campus'        => 'required',
                'status'        => 'required',
                'contractor'    => 'required',
                'password'      => 'required',
            ];
            $validation = Validator::make(Input::all(),$rules);
$response = ["error" => ['error'=>'true','status'=>'Sorry there has been an error'],
"success" => ['success'=>true,'message'=>'The new staff member was successfully added to the system']
            ];
            if($validation->fails())
            {
                return Response::json($response["error"]);
            }
            else
            {
 $user = User::find_by_email(Input::get('email'));
 if($user) {
   // send a message back via ajax that the email already exists
   if($user) {
    return Redirect::back()->with_input()
        ->with('status','The email address is already in use');
    }
 }
      $staff = new User(array( 
      'f_name'                  => Input::get('f_name'), 
      'l_name'                  => Input::get('l_name'), 
      'user_number'             => Input::get('user_number'), 
      'username'            => Input::get('username'), 
      'email'               => Input::get('email'),
      'password'                => Hash::make(Input::get('password')),
      'status'              => Input::get('status'),
      'gender'              => Input::get('gender'),    
      ));$staff->save();
  // Automatically create a profile for the new staff member
   $staff_profile = new Profile(array(
   'user_id'            => $teacher->id, 
   'contractor'         => Input::get('contractor'),
   'campus'             => Input::get('campus'),
                ));
  $staff_profile->save();
   return Response::json($response["success"]);
  }
        }

JQuery

 $('#add_staff').submit(function(){
    var datas = $(this).serialize();
    url = $(this).attr('action');
    $.ajax({
        type: 'POST',
         url: url,
         data: datas,
         dataType: 'JSON',
         success: function(msg,status){
            if(msg.error)
            {
                $(f_name).removeClass('required');
                $(f_name).addClass('required field error');
                $(l_name).removeClass('required');
                $(l_name).addClass('required field error');
                $(user_number).removeClass('required');
                $(user_number).addClass('required field error');
                $(email).removeClass('required');
                $(email).addClass('required field error');
                $(gender).removeClass('required');
                $(gender).addClass('required field error');
                $(campus).removeClass('required');
                $(campus).addClass('required field error');
                $(status).removeClass('required');
                $(status).addClass('required field error');
                $(contractor).removeClass('required');
                $(contractor).addClass('required field error');
                $(password).removeClass('required');
                $(password).addClass('required field error');
            }
            else if(msg.success)
            {
                $("#succesful_message").html(msg);
                clearInput();
            }
        }
    });
    return false;
});
function clearInput() {
$("#add_staff :input").each( function() {
    $(this).val('');
});
}

任何信息指出我在正确的方向将不胜感激，谢谢

Answer 1

我注意到的第一件事是你需要添加这个:

$('#add_staff').submit(function(e){
    e.preventDefault();
    ...
}

这样你的表单就不会刷新页面了