JQuery Ajax:未捕获的TypeError:无法读取属性' name'未定义的

时间:2016-09-30 10:11:12

标签: jquery ajax laravel-5

首先,我知道有几个人遇到了类似错误消息的错误,我经历了很多但是没有找到可以解决我自己问题的错误。

使用开发人员工具,我可以看到返回的错误消息。这两条消息是:

  

无法加载资源:服务器响应状态为500(内部服务器错误)

  

未捕获的TypeError:无法读取属性' name'未定义的

我正在提交此表单中的学生数据:

  <form  method="post" id="school_registration_form">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">

      <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>

通过这条路线:

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

到这个功能:

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);
}

以下是表单请求的验证规则:

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'
];

}

最后是最重要的部分。以下是向服务器提交值的JQuery / Ajax代码:

$(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");
          }
        }

      });       


    });

  });

对于冗长的代码感到抱歉。试图尽可能地减少它。 谢谢你的帮助。

0 个答案:

没有答案