@tj57

Как сделать валидацию полей формы перед отправкой?

Есть форма :

<form action="" method="post">
    <fieldset>
    <input type="text" name="firstname" placeholder="Имя">
    <input type="text" id="email" name="email" placeholder="E-mail" required>
    <input type="text" id="phone" name="phone" placeholder="Телефон" required>
    <input type="text" name="lastname" placeholder="Фамилия">
    <textarea name="comment" ></textarea>
    <input class= "btn" type="submit" name="submit">
    </fieldset>
  </form>


У неё обязательные поля - e-mail и телефон, которые должны быть валидны. Функция для валидации :

$(document).ready(function() {
			$('#email').blur(function() {
				if($(this).val() != '') {
					var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
					if(pattern.test($(this).val())){
						$(this).css({'border' : '1px solid #569b44'});
            $('#valid-mail').remove();
					} else {
						if (!($('#email').next().attr('id')=='valid-mail')) {
							$(this).css({'border' : '1px solid #ff0000'});
	            $('#email').after("<span id = 'valid-mail'></span>");
							$('#valid-mail').text('Неверно введён e-mail');
						}
					}
				}
			});

      $('#phone').blur(function() {
				if($(this).val() != '') {
					var pattern = /^\d[\d\(\)\ -]{4,14}\d$/;
					if(pattern.test($(this).val())){
						$(this).css({'border' : '1px solid #569b44'});
            $('#valid-phone').remove();
					} else {
						if (!($('#phone').next().attr('id')=='valid')) {
							$(this).css({'border' : '1px solid #ff0000'});
	            $('#phone').after("<span id = 'valid-phone'></span>");
							$('#valid-phone').text('Неверно введён номер телефона');
						}
					}
				}
			});
		});


Что нужно добавить, чтобы отправка формы происходила только при условии валидности этих полей? Также после отправки нужно сделать редирект на любой сайт.
  • Вопрос задан
  • 192 просмотра
Пригласить эксперта
Ответы на вопрос 1
slo_nik
@slo_nik
Добрый день.
Вот есть такой плагин, не надо изобретать велосипед.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы