@VladimirPortev

Как сделать обработку ошибок на Ajax?

Всем привет. Помогите разобраться с Ajax'ом, пожалуйста. А именно с обработчиком ошибок. Форма работает, все отправляется. А вот как сделать обработку ошибок, я не знаю. Не хотелось бы использовать validate - плагин.
Вот код
<form action="<?=POST_FORM_ACTION_URI?>" method="POST" id="callback" name="callback">

	<div>
		<div>Ваше имя<span>*</span></div>
		<input type="text" name="author" value="" >
		<div class="form__error">Нужно заполнить!</div>
	</div>
	
	<div>
		<div>Номер телефона<span>*</span></div>
		<input type="text" name="phone" value="" >
		<div class="form__error">Нужно заполнить!</div>
	</div>					
	
	<div class="form__buttons">
		<input type="submit" class="form__submit" name="submit">
	</div>	
</form>

<script>
	$(document).ready(function() {
	  $('form').on('submit', function(){
		   var formID = $(this).attr('id');
		   var formNm = $('#' + formID);
		   if (formID == 'callback') {
			 $.ajax({
				url: '/include/send_callback.php',
				type: 'post',
				data: formNm.serialize(),
				success: function(data){
					$(formNm).html(data);
				}
			 });
			   return false;
		  };
	  });
   });
</script>

Мне надо сделать так, если не заполнено поле Имя (Телефон) в блоке <div class="form__error">Нужно заполнить!</div>
Стало <div class="form__error is active">
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 3
dpr
@dpr
frontend developer
Пусть ваш бэкэнд возвращает на запрос не html, а json.
в этом случае вы можете возвращать любые данные, любую информацию.
Например при наличии ошибки сервер вернёт

{
  "status": false,
  "errors": {
    "phone": "Поле не заполнено"
  }
}


В обработчике будете проверять

success: function(data){
  if (data.status) {
    $(formNm).html(data.html);
  } else {
    for (id in data.errors) {
      $('#'+id).addClass('error');
      $('#'+id+'_message').html(data.errors[id]);
    }
  }
}


Код примерный, для иллюстрации общей идеи.
Ответ написан
AskMy
@AskMy
иногда решаю задачки и задаю глупые вопросы
а обычный required не вариант ?
https://codepen.io/topicstarter/pen/ddBKym
Ответ написан
@berzhikeev
При submit. у формы можно запустить стандартную проверку(валидную, от браузера), подсветка ошибок тоже будет нативна(стандартные текста "Заполните поле"). Проверить можна так
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (!inpObj.checkValidity()) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы