Вывод сообщений об ошибках через JS и Request-ов
272
21 апреля 2022, 07:10
есть форма уже созданная на сайте, нужно было приделать на ту же страницу уже другую форму, по функционалу они выполняют одно и то же, отправка почты к владельцу сайта, но с разными параметрами. Воспользовался уже существующим роутом
Route::post('/send', 'MailController@send')->name('mail.send');
Тем же контроллером для отправки формы
namespace App\Http\Controllers;
use App\Http\Requests\MailRequest;
use App\Mail\MailSend;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
class MailController extends Controller
{
public function send(Request $request, MailRequest $mailRequest)
{
$mailData = $request->all();
$mail = ['eliseevsu@gmail.com'];
Mail::to($mail)->send(new MailSend($mailData));
return response()->json([
'successful'=>"<div class='message'>Спасибо, за обращение! <br> Мы ответим Вам совсем скоро.</div>"
]);
}
}
Дополнил файл Request для моей формы
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class MailRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
switch($this->method())
{
case 'GET':
case 'DELETE':
{
return [];
}
case 'POST':
{
return [
'name' => 'required',
'phone' => 'required',
'height' => 'required',
'length' => 'required',
'numberofwicket' => 'nullable',
'numberofgates' => 'nullable',
'distance' => 'nullable'
];
}
default:break;
}
}
public function messages()
{
return [
'phone.required' => '* Укажите свой телефон!',
'name.required' => '* Укажите своё имя!',
'height.required' => '* Укажите желаемую высоту забора!',
'length.required' => '* Укажите желаемую длинну забора!'
];
}
}
P.S.До этого реквест был такой
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class MailRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
switch($this->method())
{
case 'GET':
case 'DELETE':
{
return [];
}
case 'POST':
{
return [
'name' => 'required',
'phone' => 'required',
];
}
default:break;
}
}
public function messages()
{
return [
'phone.required' => '* Укажите свой телефон!',
'name.required' => '* Укажите своё имя!'
];
}
}
И собственно шаблон моей формы прилагаю
<noindex>
<div class="main-form">
<h3>Моя форма</h3>
<p></p>
<form method="POST" action="{{route('mail.send')}}" accept-charset="UTF-8" class="myy-form uk-form">
@csrf
<div class="uk-margin">
<input class="uk-input" placeholder="Высота забора, м*" name="height" type="text">
<span class="error heightError"></span>
</div>
<div class="uk-margin">
<input class="uk-input" placeholder="Длина забора, м*" name="length" type="text">
<span class="error lengthError"></span>
</div>
<div class="uk-margin">
<input class="uk-input" placeholder="Количество калиток, шт" name="numberofwicket" type="text">
</div>
<div class="uk-margin">
<input class="uk-input" placeholder="Количество ворот, шт" name="numberofgates" type="text">
</div>
<div class="uk-margin">
<input class="uk-input" placeholder="Удалённость от МКАД, км" name="distance" type="text">
</div>
<div class="uk-margin">
<input class="uk-input" placeholder="Имя *" name="name" type="text">
<span class="error nameError"></span>
</div>
<div class="uk-margin">
<input class="uk-input phone_number" placeholder="+7 (___) ___-__-__ *" name="phone" type="text">
<span class="error phoneError"></span>
</div>
<div class="uk-margin">
<input class="uk-input" placeholder="e-mail" name="email" type="text">
</div>
<div class="uk-margin uk-grid uk-grid-small">
<div class="uk-width-small@s">
<input class="btn" value="Отправить" type="submit">
</div>
<div class="uk-width-expand@s mini_text">
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
</div>
</div>
<input type="hidden" name="page" value="{{ URL::current() }}">
</form>
</div>
</noindex>
По логике формы уже существующей на сайте, есть вывод ошибок в специально созданных дивах, они выводятся через JS и если какое то поле отсутствует, AJAX не отправляется. Вот сам JS код.
document.addEventListener("DOMContentLoaded", function() {
if (document.querySelector(".phone_number")) {
var input = document.querySelectorAll(".phone_number");
for (var t = 0; t < input.length; t++) {
input[t].addEventListener("input", mask, false);
input[t].addEventListener("focus", mask, false);
input[t].addEventListener("blur", mask, false);
}
}
var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
var method = 'POST';
var uri = mailUrl;
if (document.querySelector(".m-form")) {
var mainForm = document.querySelectorAll(".m-form");
for(var k = 0; k < mainForm.length; k++ )
{
mainForm[k].onsubmit = function (event) {
event.preventDefault();
var formClass = this;
var params = '';
if (formClass.elements['name']) params += '&name=' + formClass.elements['name'].value;
if (formClass.elements['phone']) params += '&phone=' + formClass.elements['phone'].value;
if (formClass.elements['email']) params += '&email=' + formClass.elements['email'].value;
if (formClass.elements['page']) params += '&page=' + formClass.elements['page'].value;
ajaxToServer(method, uri, params, token, function () {
if (this.successful !== undefined) {
formClass.innerHTML = this.successful;
ym(48261257, 'reachGoal', 'forma');
};
if (this.errors.name !== undefined) {
formClass.querySelector('.nameError').style = 'display:block';
formClass.querySelector('.nameError').innerHTML = this.errors.name;
} else {
formClass.querySelector('.nameError').style = 'display:none';
};
if (this.errors.phone !== undefined) {
formClass.querySelector('.phoneError').style = 'display:block';
formClass.querySelector('.phoneError').innerHTML = this.errors.phone;
} else {
formClass.querySelector('.phoneError').style = 'display:none';
};
if (this.errors.email !== undefined) {
formClass.querySelector('.emailError').style = 'display:block';
formClass.querySelector('.emailError').innerHTML = this.errors.email;
} else {
formClass.querySelector('.emailError').style = 'display:none';
};
});
}
}
}
if (document.querySelector(".myy-form")) {
var mainForm = document.querySelectorAll(".myy-form");
for(var k = 0; k < mainForm.length; k++ )
{
mainForm[k].onsubmit = function (event) {
event.preventDefault();
var formClass = this;
var params = '';
if (formClass.elements['height']) params += '&height=' + formClass.elements['height'].value;
if (formClass.elements['length']) params += '&length=' + formClass.elements['length'].value;
if (formClass.elements['name']) params += '&name=' + formClass.elements['name'].value;
if (formClass.elements['phone']) params += '&phone=' + formClass.elements['phone'].value;
if (formClass.elements['email']) params += '&uemail=' + formClass.elements['email'].value;
if (formClass.elements['page']) params += '&page=' + formClass.elements['page'].value;
ajaxToServer(method, uri, params, token, function () {
if (this.successful !== undefined) {
formClass.innerHTML = this.successful;
ym(48261257, 'reachGoal', 'forma');
};
if (this.errors.height !== undefined) {
formClass.querySelector('.heightError').style = 'display:block';
formClass.querySelector('.heightError').innerHTML = this.errors.height;
} else {
formClass.querySelector('.heightError').style = 'display:none';
};
if (this.errors.length !== undefined) {
formClass.querySelector('.lengthError').style = 'display:block';
formClass.querySelector('.lengthError').innerHTML = this.errors.length;
} else {
formClass.querySelector('.lengthError').style = 'display:none';
};
if (this.errors.name !== undefined) {
formClass.querySelector('.nameError').style = 'display:block';
formClass.querySelector('.nameError').innerHTML = this.errors.name;
} else {
formClass.querySelector('.nameError').style = 'display:none';
};
if (this.errors.phone !== undefined) {
formClass.querySelector('.phoneError').style = 'display:block';
formClass.querySelector('.phoneError').innerHTML = this.errors.phone;
} else {
formClass.querySelector('.phoneError').style = 'display:none';
};
});
}
}
}
});
function ajaxToServer(method, uri, params, token, callback){
var http = '';
if (window.XMLHttpRequest) {
http = new XMLHttpRequest;
}
else {
http = new ActiveXObject('Microsoft.XMLHttp');
}
http.onreadystatechange = function() {
if(http.readyState == XMLHttpRequest.DONE) {
if(http.status == 200) {
callback.call(JSON.parse(http.responseText));
}
else if(http.status == 422) {
callback.call(JSON.parse(http.responseText));
}
else {
alert('Что то не так c этой формой');
}
}
};
http.open(method, uri, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("X-CSRF-TOKEN", token);
http.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
http.send(params);
}
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}
Проблема в том, что для формы уже существующей работает вывод ошибок, а для моей нет, толи в JS где ошибся, то ли я не пойму как работает этот обработчик. Конечно, просто повторил уже существующее решение для моей формы, но оно не работает. Может быть я упустил еще какой то обработчик. Форма кстати успешно отправляется на форму, все работает.(Если поля не заполнены, она согласно документации переходит на страницу с которой совершена отправка формы и на почту ничего не приходит).
Кастомных валидаторов в папке resources/lang нет. В файле AppServiceProvider.php тоже ничего связанного с валидацией и выводом нет. Может быть есть какие то vue скрипты, которые мне бы стоило посмотреть ?
Answer 1
Я так понимаю, что форма отправки сообщения не во Vue, а отдельно в blade. Если так, то надо обернуть форму отправки сообщения в Vue.
Например так:
<template>
<div>
<input type="text" v-model="formData.msg"/>
<input type="text" v-model="formData.userName"/>
<button type="button" @click="sendData()">Отправить</button>
</div>
</template>
<script>
export default {
data () {
return{
formData:{
msg:'',
userName:''
}
}
},
methods:{
sendData () {
if (this.formData.msg === '') {
alert('Заполните поле 1')
}
else if (this.formData.userName === '') {
alert('Заполните поле 2')
} else {
axios.post('http://test.com/api....', {data:this.formData })
.then(res => {
// работаем с ответом
}).catch( err => {
console.error(err)
}).finally(() => {
// Действия в конце
})
}
}
}
}
</script>
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47563 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30497 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23632 visits
- Как через css изменить цвет png изображения? 10350 visits
- Blob video url download 9959 visits
- Php curl запрос через прокси с авторизацией 9212 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 27.11.2024 | 07:28