Laravel валидация для Ajax

@dmitrygrinevic · Регистрация: 08.05.2017

Привет, всем.
Есть котроллер в котором проходит валидация данных если нет ошибок то отправляет на почту. Если есть ошибки то выводит на экран над формой. Всё хорошо работает когда форма не работает через ajax.
Я перевожу форму на ajax - [js], как мне сделать валидацию чтобы выводило на экран без перезагрузки страницы. Чтобы запрос проходил на контроллер где моя валидация а данное сообщение выводилось через аякс, как передать И вывести на форму ?
Всё что не пробую не выводит.

форма:

PHP

<form id="contactform" method="post">
<div class="alert alert-success">
{{session('status')}}
</div>
@endif
@if($errors->any())
<div class="alert alert-danger">
<ul>
@foreach($errors->all() as $error)//Выводил ошибки когда небыло аякса
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div id="тут хочу выводит сообщение с аякса"></div>
{{csrf_field()}}
<div class="form-group">
<label for="name">Name</label><br>
<br><input type="text" name="name" placeholder="Enter your Name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label><br>
<br><input type="text" name="email" placeholder="Enter your Email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone</label><br>
<br><input type="text" name="phone" placeholder="Enter your Phone" id="phone" class="form-control">
</div>
<div class="form-group">
<label for="msg">Message</label><br>
<br><input type="text" name="msg" placeholder="Enter your Message" id="msg" class="form-control">
</div>
<button type="contactform" id="test_id" class="btn btn-succes">Submit</button>
</form>
</div>
</div>
</div>
</div>

Вот сам контроллер class:

PHP

class SubscribeController extends Controller
{
    public function subscribe(Request $request) {
 
      $validation = $request->validate([
        'name' => 'required',
        'email' => 'required',
        'phone' => 'required',
        'msg' => 'required'
      ]);
 
      $name = $request->name;
      $email = $request->email;
      $msg = $request->msg;
      $phone = $request->phone;
 
      Mail::to('Admin@gmail.com')->send(new SubscribeEmail($name, $email, $msg, $phone));
    }
}

Вот js

PHP

$('body').on("click",'#test_id', function(e){
  e.preventDefault();
  var name = $("#name").val().trim();
  var email = $("#email").val().trim();
  var phone = $("#phone").val().trim();
  var msg = $("#msg").val().trim();
 
  $("$validation").text("");
 
  $.ajax({
    type: 'POST',
    url: '/en/sendmail',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: { 'name': name, 'email': email, 'phone': phone, 'msg': msg },
    beforeSend: function() {
      $("#sendMail").prop("disabled", true);
    },
    success: function (data) {
      if(data == true) {
      alert("Error!");
    }
      else{
        $("#contactform").trigger("reset");
        $("#sendMail").prop("disabled", false);
        $("#MessSend").text("Сообщение отправлено!");
        return false;
        }
      }
    });
});

Пробeвал выводить таким образом без контроллера. То всё работает но это не то что надо. Плохой вариант.
в формe выводил данное сообщение через <div id="#errorMess"></div>

js:

PHP

$('body').on("click",'#test_id', function(e){
  e.preventDefault();
  var name = $("#name").val().trim();
  var email = $("#email").val().trim();
  var phone = $("#phone").val().trim();
  var msg = $("#msg").val().trim();
 
  if(name == ""){
    $("#errorMess").text("Введите Имя");
    return false;
  }
  else if(email == ""){
    $("#errorMess").text("Введите почту");
    return false;
  }
  else if(phone == ""){
    $("#errorMess").text("Введите номер телефона");
    return false;
  }
  else if(msg.length < 5) {
    $("#errorMess").text("Введите в поле с сообщением не меньше 5 символов");
    return false;
  }
 
  $("#errorMess").text("");
 
 
  $.ajax({
    type: 'POST',
    url: '/en/sendmail',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: { 'name': name, 'email': email, 'phone': phone, 'msg': msg },
    beforeSend: function() {
      $("#sendMail").prop("disabled", true);
    },
    success: function (data) {
      if(data == true) {
      alert("Error!");
    }
      else{
        $("#contactform").trigger("reset");
        $("#sendMail").prop("disabled", false);
        $("#MessSend").text("Сообщение отправлено!");
        return false;
        }
      }
    });
});

И Вот сам контроллер

PHP

class SubscribeController extends Controller
{
    public function subscribe(Request $request) {
 
      Mail::to('a.pryamukha.dstar@gmail.com')->send(new SubscribeEmail($name, $email, $msg, $phone));
      
    }
}

@tarasalk · 30.10.2020, 14:23

Ты же понимаешь что PHP работает на сервере, а js у клиента в браузере?
Соответственно всё такое

PHP

1
2
3

@foreach($errors->all() as $error)//Выводил ошибки когда небыло аякса
<li>{{ $error }}</li>
@endforeach

Не будет работать вместе с аякс запросом. Весь ответ, который пришел от сервера, тебе нужно вручную распарсить через js и вставить в нужное место в html. Вообще я рекомедовал бы тебе выкинуть Jquery и использовать vue.js. Так гораздо проще строить крутой интерфейс.

Javascript

success: function (data) {
      if(data == true) {
      alert("Error!");
    }
      else{
        $("#contactform").trigger("reset");
        $("#sendMail").prop("disabled", false);
        $("#MessSend").text("Сообщение отправлено!");
        return false;
        }
      }
    });

Это чушь. success уже означает что ответ успешный и никакой data == true проверять не нужно. В data лежит ответ сервера. Правда твои контроллеры почему-то вообще ничего не возвращают в случае успеха. А вот ошибки у тебя будут в другом блоке.
Т.е. чтобы поймать ошибку валидации нужно что-то подобное

Javascript

1
2
3

error: function (data) {
 
}

И нужно еще статус ответа проверить, у ларавела кажется это 422.

@dmitrygrinevic · 05.11.2020, 10:43 **[ТС]**

Сделал так, то ничего не происходит, в чём проблема?
вот скрипт

PHP

$('body').on("click",'#test_id', function(e){
    e.preventDefault();
    var name = $("#name").val().trim();
    var email = $("#email").val().trim();
    var phone = $("#phone").val().trim();
    var msg = $("#msg").val().trim();
 
    $("$validation").text("");
 
    $.ajax({
      type: 'POST',
      url: '/en/sendmail',
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: { 'name': name, 'email': email, 'phone': phone, 'msg': msg },
      beforeSend: function() {
        $("#sendMail").prop("disabled", true);
      },
      success: function (data) {
        $("#contactform").trigger("reset");
        $("#test_id").prop("disabled", false);
        console.log('successfully data added');
      },
      error: function(error){
        $(#nameError).text(error.responseJSON.errors.name);
      }
    }
  }
});
});

вот обработчик

PHP

<?php
 
namespace App\Http\Controllers;
 
use App\Mail\SubscribeEmail;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Validator;
 
class SubscribeController extends Controller
{
  public function subscribe(Request $request) {
    $validation = $request->validate([
       'name' => 'required|min:2',
       'email' => 'required',
       'phone' => 'required|min:9|max:13',
       'msg' => 'required|min:10'
     ]);
 
     $name = $request->name;
     $email = $request->email;
     $msg = $request->msg;
     $phone = $request->phone;
 
     return response()->json();
 
     //Mail::to('pryam@gmail.com')->send(new SubscribeEmail($name, $email, $msg, $phone));
 
   }
 
}

вот HTml для вывода ошибки

HTML5

1	<span class="text-danger" id="nameError"></span>

@dmitrygrinevic · 17.11.2020, 13:32 **[ТС]**

Решено! Спасибо всем за ответ.

@dmitrygrinevic 1 / 1 / 0 Регистрация: 08.05.2017 Сообщений: 50
	17.11.2020, 13:32 [ТС]	4
	Решено! Спасибо всем за ответ. 0