@AlionaKholod

Как в js прописать очистку формы и проверку инпутов на правильность заполнения?

Помогите, пожалуйста, новичку!
Сделала форму обратной связи. Но форма после отправки не очищается. Пробовала разные варианты, не работает. Заодно и подскажите, пожалуйста, скрипт который бы проверял инпуты на правильность заполнения (что введен именно e-mal и т.д.).

Вот js:

$(function() {

/* Отправка заявки */
$("#order__form").submit(function() {
$.ajax({
type: "POST",
url: "php/post.php",
data: $(this).serialize()
})
.done(function() {
setTimeout(function (){
$('.order__massage').fadeIn();
$('#order__form').trigger('reset');
},1100);
$('.order__massage').on('click', function(e) {
$('.order__massage').fadeOut();
});
});
return false;
});
});

order__massage - это всплывающее окно о результатах отправки.
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
wapster92
@wapster92 Куратор тега JavaScript
У html есть атрибуты для этого, и можно к ним привязываться, как в интернете множество примеров, вот хорошая статья. Так же есть подобные библиотеки. Для очистки формы в js есть метод reset.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@zkrvndm
Веб-разработчик
Для проверки правильности заполнения полей в форме используйте атрибут pattern.
Для отправки формы без перезагрузки страницы jQuery не обязателен, достаточно чистого JavaScript.

Разместите код ниже на странице с формой:
<script type="text/javascript">

  // По готовности страницы, вешаем на форму обрабочтик onsubmit инлайново:
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form#FORM_ID').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
  });

  // Функция для отправки формы на чистом JavaScript:
  function form_send(form) {
    var url = form.getAttribute('action') + '?time=' + new Date().getTime();
    var xhr = new XMLHttpRequest(); xhr.open('POST', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          form.setAttribute('onsubmit', 'event.preventDefault();');
          form.innerHTML = xhr.responseText;
        }
        else {
          alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
          console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
          console.dir(xhr);
        }
      }
    }
    xhr.send(new FormData(form));
  }
  
</script>

Только замените FORM_ID на id своей формы! В вашем случае это вроде как order__form. Также обратите внимание, что у вашей формы form должен быть правильно прописан action, если action не указан, то работать НЕ будет.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы