JQuery Ajax: Uncaught TypeError: Cannot read property 'name' of undefined

First of all, I know several people have encountered a bug with a similar error message and I have gone through a lot of them but didn't find one that could solve my own problem.

Using the developer tools, I could see the error messages returned. The two messages are:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

and

Uncaught TypeError: Cannot read property 'name' of undefined

I am submitting student data from this form:

  <form  method="post" id="school_registration_form">
      <input type="hidden" name="_token" value="">

      <input type="text" id="name" name="name">
      <div id="name_error"></div>

      <input type="email" id="school_email" name="school_email">
      <div id="school_email_error"></div>

      <input type="email" id="your_email" name="your_email">
      <div id="your_email_error"></div>

      <input type="text" id="phone" name="phone" >
      <div id="phone_error"></div>

      <input type="password" id="password" name="password">
      <div id="password_error"></div>

      <input type="password" id="password_confirmation" name="password_confirmation" >
      <div id="password_confirmation_error"></div>

      <div class="col-sm-offset-3 col-sm-10">
      <button type="submit" class="btn btn-success">Create Account</button>
  </div>

through this route:

Route::post('store', ['as' => 'school/store', 'uses' => 'SchoolController@store']);

to this function:

public function store(SchoolCreateUserRequest $request){

 $user = User::create([
    'name' => $request->input('name'),
    'inst_email' => $request->input('school_email'),
    'alt_email' => $request->input('your_email'),
    'phone' => $request->input('phone'),
    'password' => bcrypt($request->input('password')),
  ]);

  Auth::login($user);
}

Here are the validation rules for the form request:

public function rules(){
return [
    'name' => 'required|unique:users|min:8',
    'school_email' => 'required|email',
    'your_email' => 'required|email|unique:users',
    'phone' => 'required',
    'password' => 'required|confirmed|min:4',
    'password_confirmation' => 'required'
];

}

and finally the most important part. Here is the JQuery/Ajax code that submits values to the server:

$(function(){

    $.ajaxSetup({
      headers: {
        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
      }
    });

    // when form submit button is clicked
    $('#ub_registration_form').submit(function (e) {
      e.preventDefault();

      var name = $('#name').val();
      var school_email = $('#school_email').val();
      var your_email = $('#your_email').val();
      var phone = $('#phone').val();
      var password = $('#password').val();
      var password_confirmation = $('#password_confirmation').val();
      var token = $("input[name=token]").val();
      var route = "school/store";


      $.ajax({
        url: route,
        type: 'post',
        datatype: 'json',
        data: {
          'name'  : name,
          'school_email' : school_email,
          'your_email'  : your_email,
          'phone'      : phone,
          'password'   : password,
          'password_confirmation'  : password_confirmation,
          '_token': $('meta[name="_token"]').attr('content')
        },
        success: function(msg){
          notify('Your account was successfully created.', 'success', "ub");
          logged_in_user();
        },
        error: function(data){
          var name = data.responseJSON.name;
          var school_email = data.responseJSON.school_email;
          var your_email = data.responseJSON.your_email;
          var phone = data.responseJSON.phone;
          var password = data.responseJSON.password;
          var password_confirmation = data.responseJSON.password_confirmation;

          $('#name_error').html(data.responseJSON.name);
          if (name != null && name != "") {
            $('#name').css("border", "1px solid red");
          }

          $('#school_email_error').html(data.responseJSON.school_email);
          if (school_email != null && school_email != "") {
            $('#school_email').css("border", "1px solid red");
          }


          $('#your_email_error').html(data.responseJSON.your_email);
          if (your_email != null && your_email != "") {
            $('#your_email').css("border", "1px solid red");
          }


          $('#phone_error').html(data.responseJSON.phone);
          if (phone != null && phone != "") {
            $('#phone').css("border", "1px solid red");
          }

          $('#password_error').html(data.responseJSON.password);
          if (password != null && password != "") {
            $('#password').css("border", "1px solid red");
          }

          $('#password_confirmation_error').html(data.responseJSON.password_confirmation);
          if (password_confirmation != null && password_confirmation != "") {
            $('#password_confirmation').css("border", "1px solid red");
          }
        }

      });       


    });

  });

Sorry for the lengthy code. Tried to reduce it as much as i could. Thanks for any help.

via Chebli Mohamed