Обычная форма отправки.
Способ отправки данных осуществляется через Ajax в формате Json.
При отправке данных получаю ошибку в консоле: errorThrown: SyntaxError: Unexpected end of JSON input
Я так понимаю,что данные приходят в формате html, а нужен формат json.
Пока что мне не удалось решить эту проблему,может Вы сможете подкинуть идеи решения данного вопроса.Спасибо!
PHP:
class Contact
{
//Обработка формы
public function contactData()
{
$name = isset($_POST['name']) ? $_POST['name'] : null;
$surname = isset($_POST['surname']) ? $_POST['surname'] : null;
$email = isset($_POST['email']) ? $_POST['email'] : null;
$phone = isset($_POST['phone']) ? $_POST['phone'] : null;
//результат промежуточных данных об успехе\ошибках
$resData = array();
// Валидация полей
if (!$this->checkName($name)) {
$resData['success'] = 0;
$resData['message'] = 'Неправильное Имя!';
}
if (!$this->checkName($surname)) {
$resData['success'] = 0;
$resData['message'] = 'Неправильная Фамилия!';
}
if (!$this->checkEmail($email)) {
$resData['success'] = 0;
$resData['message'] = 'Неправильный email!';
}
if (!$this->checkPhone($phone)) {
$resData['success'] = 0;
$resData['message'] = 'Неправильный номер телефона!';
}
if (!$resData) {
$resData['success'] = 1;
$resData['message'] = "Ваши данные! <br/>";
} else {
$resData['success'] = 0;
$resData['message'] = 'Ошибка Отправки данных!';
}
echo json_encode($resData, JSON_UNESCAPED_UNICODE);
}
public function clearData($data)
{
$data = trim(strip_tags(stripslashes(htmlspecialchars($data))));
return $data;
}
public function checkEmail($email)
{
$email = $this->clearData($email);
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
return true;
}
return false;
}
public function checkName($name)
{
$name = $this->clearData($name);
if (strlen($name) >= 2) {
return true;
}
return false;
}
public function checkPhone($phone)
{
$phone = $this->clearData($phone);
if (filter_var($phone, FILTER_VALIDATE_INT )) {
return true;
}
return false;
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Форма отправки</title>
<meta charset="UTF-8">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/form.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://bootstraptema.ru/snippets/form/2017/recaptcha/custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1 class="text-center">Форма отправки</h1>
<form id="contact-form" method="post" action="" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Firstname *</label>
<input id="name" type="text" name="name" class="form-control" placeholder="Пожалуйста, введите ваше имя *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname">Lastname *</label>
<input id="lastname" type="text" name="surname" class="form-control" placeholder="Пожалуйста, введите свою фамилию *">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email">Email *</label>
<input id="email" type="email" name="email" class="form-control" placeholder="Пожалуйста, введите свой email *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="phone">Phone *</label>
<input id="phone" type="tel" name="phone" class="form-control" placeholder="Пожалуйста, введите ваш телефон*">
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
<div id="messageShow" style="color:red"></div>
<p>Результат запроса:</p>
<p class="regOk"></p>
</div>
</div>
</div>
</form>
</div><!-- /.col-lg-8 col-lg-offset-2 -->
</div> <!-- /.row-->
</div> <!-- /.container-->
</body>
</html>
JS:
$(document).ready(function(){
//проверка полей
function check(message) {
if (message) {
$('#messageShow').html(message);
$('#messageShow').show();
}
}
$('#contact-form').submit(function (event) {
event.preventDefault();
var name = $('#name').val();
var lastname = $('#lastname').val();
var email = $('#email').val();
var phone = $('#phone').val();
var error = false; // прeдвaритeльнo oшибoк нeт
var msg = [];
//проверка имени
if ( name.length < 2) {
msg = 'Имя не должно быть короче 2-х символов';
check(msg);
error = true;
}
else if (lastname.length < 2) {
msg = 'Фамилия не должна быть короче 2-х символов';
check( msg);
error = true;
}
else if ( email == '') {
msg = 'Введите корректный эмейл';
check(msg);
error = true;
}
else if ( phone == '' || !phone.replace (/\D/g, '')) {
msg = 'Введите корректный номер телефона';
check( msg);
error = true;
}
if ( !error) {
check( msg);
//записываем в массив данные
var postData = {
name: name,
lastname: lastname,
email: email,
phone: phone,
};
$.ajax({
type: 'POST',
url: 'contact.php',
data: postData,
dataType: 'json',
success: function (result) {
console.log('OK!');
if (result['success']) {
$('.regOk').html(result['message']).fadeOut(10000); //вывод успеха редактирования на страницу
}
},
error: function(jqxhr, textStatus, errorThrown) {
console.log("jqXHR: ", jqxhr);
console.log("textStatus: ", textStatus);
console.log("errorThrown: ", errorThrown);
alert('ОШИБКА!!');
}
});
return false;
}
});
});
