Bootstrap modal, jquery ajax form validation and db insert in laravel - ajax

Question

I'm trying to use a bootstrap modal, with live email checking and validation with finally db insert. I've looked at several tutorials but cant bring it all together. I have 0 js skills. I have a form in a modal which submits and validate the normal laravel way. Only problem is that if it has errors we see the message upon page refresh and not in the modal. :(
I've added some ajax stuff I saw in a post which has enabled my form to submit the data into the db with out refreshing. :) However I can't work out how to correctly return the errors and a success message upon insert.So far the only errors that work are required fields color coded in red but no message is displayed.
What I want to achieve is this but in a modal tutorial
This is the code I have so far:
Form
{{ 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() }}
Controller:
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('');
});
}
Any info pointing me in the right direction would be appreciated, thanks

Answer 1

The first thing I noticed is you need to add this:
$('#add_staff').submit(function(e){
e.preventDefault();
...
}
That way your form doesn't refresh the page.