Question

我正在尝试使用bootstrap模式，使用最终db插入的实时电子邮件检查和验证。我看过几个教程，但不能把它们整合在一起。我有0个技能。我有一个模态的表单，提交并验证正常的laravel方式。唯一的问题是，如果它有错误，我们会在页面刷新时看到消息而不是模态。：（

我添加了一些我在帖子中看到的ajax内容，它使我的表单能够将数据提交到数据库而不需要刷新。 :)但是我无法弄清楚如何在插入时正确返回错误和成功消息。到目前为止唯一有效的错误是必填字段颜色编码为红色但没有显示消息。

我想要达到的目的是在模态tutorial

中

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

表格

{{ 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();
    ...
}

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

Bootstrap模式，jquery ajax表单验证和lalavel中的db插入

1 个答案: