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

Question

[AlionaKholod]

Помогите, пожалуйста, новичку!
Сделала форму обратной связи. Но форма после отправки не очищается. Пробовала разные варианты, не работает. Заодно и подскажите, пожалуйста, скрипт который бы проверял инпуты на правильность заполнения (что введен именно 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 - это всплывающее окно о результатах отправки.

Comments

[AlionaKholod]

Здравствуйте! Я гуглила. Уже несколько дней причем. Вставляю нужные части в свой код, но почему-то не работает. Я новичок в js, возможно что-то лишнее вставляю или не туда..
Например, пробовала вот это:

function valEl(el){
el.validate({
rules:{
phone:{
required: true,
regex: '^([\+]+)*[0-9\x20\x28\x29\-]{5,20}$'
},
name:{
required:true,

},
mail:{
required: true,
email: true
}
},
messages:{
phone:{
required: 'Поле обязательно для заполнения',
regex: 'Телефон может содержать символы + - ()'
},
name:{
required: 'Поле обязательно для заполнения',
regex: 'Имя не может содержать символы и цифры'
},
mail:{
required: 'Поле обязательно для заполнения',
email: 'Неверный формат E-mail'
}
}
})
};

Answer 1

[WapSter]

У html есть атрибуты для этого, и можно к ним привязываться, как в интернете множество примеров, вот хорошая статья. Так же есть подобные библиотеки. Для очистки формы в js есть метод reset.

Comments

[AlionaKholod]

Спасибо большое за помощь! Статью прочитала, библиотеки смотрю.

У меня в коде было прописано вот это: $('#order__form').trigger('reset');
По идее должно было работать, но почему-то форма не очищалась.
Сейчас переписала вот так и все заработало:

$(function() {

	$("#order__form").submit(function() {
		$.ajax({
			type: "POST",
			url: "php/post.php",
			data: $(this).serialize()
		})

		.done(function() { //Если все хорошо, показываем сообщение об отправки и очищаем поля
			$(".order__massage").addClass("active").css('display', 'flex').hide().fadeIn(); 
			setTimeout(function(){ 
				jQuery("#order__form").trigger("reset"); 
				$('.order__massage').on('click', function(e) {
				$('.order__massage').fadeOut();
				}); 
		});
		return false;
	});
});

Answer 2

[Надим]

Для проверки правильности заполнения полей в форме используйте атрибут 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 не указан, то работать НЕ будет.