Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2017, 20:30
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

validation - Валидация формы
Валидация формы
Здравствуйте. Подскажите, пожалуйста, что в данном случае я делаю не так. Строки кода, которые не работают, я выделил комментариями.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>form</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<form class="form1">
		email: <input class="val__input_fname" type="text" name="email" value="email" /> <br />
	
		<input type="submit" />
	</form>

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>


$(document).ready(function() {
	(function() {

		var 
			form = $("form.form1"),
			input__fname = $('input.val__input_fname');


		function validate(elem, pattern) {
		    var res = elem.val().search(pattern);

		    if ( res == -1 ) {
		    	elem.addClass("invalid", function() {
		    		$(this).removeClass("valid");
		    	});
		    }
		    else {
		    	elem.addClass("valid", function() {
	    			$(this).removeClass("invalid");
		    	});
		    }
		}
			
		function nameOnChange() {
			var pattern = /\b[a-z0-9._]+@[a-z0-9.-]+\.[a-z]{2,4}\b/i;

    		validate(input__fname, pattern);
		}

		input__fname.on('change', function() {
			nameOnChange();
		});

		function onsubmiHandler() {

			var  invalid = false;

			input__fname.trigger('change'); // не работает
			
			if ( input__fname.hasClass('invalid') ) {
				invalid = true;
			}

			if ( invalid ) {
				
				alert("Допущены ошибки при заполнении формы.");

				return false; // не работает
			}
		}

		form.on('submit', function() {
			onsubmiHandler();
		});
	})();
});

Последний раз редактировалось s24344, 13.01.2017 в 20:45.
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2017, 20:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

s24344,
а где 15 строка???
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2017, 20:48
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Не отрабатывает: return false // отмена submit
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2017, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

s24344,
строка 53
return onsubmiHandler();
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2017, 21:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

s24344,
и на всякий случай про true не забудьте в onsubmiHandler
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2017, 22:06
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 20.07.2017, 07:58
Интересующийся
Отправить личное сообщение для DjonyBastone Посмотреть профиль Найти все сообщения от DjonyBastone
 
Регистрация: 20.07.2017
Сообщений: 10

Валидация с логикой
Всем привет

Форма с соглашением (checkbox)
html:
<form action="form.php" class="validate">
				<h3>Заказать консультацию <span>специалиста</span></h3>
				<p>Оставьте контактные данные и в течении 5 минут вам перезвонит опытный специалист!</p>
				<div class="wrap_input">
					<input type="text" name="name" placeholder="Введите Ваше имя" required>
					<i class="fa fa-user" aria-hidden="true"></i>
				</div>
				<div class="wrap_input">
					<input type="email" name="email" placeholder="Введите Ваш email">
					<i class="fa fa-phone" aria-hidden="true"></i>
				</div>
				<div class="wrap_input">
					<input type="tel" name="tel" placeholder="Введите Ваш телефон">
					<i class="fa fa-phone" aria-hidden="true"></i>
				</div>
                <div class="form__checkbox">
                    <label for="form__checkbox">
                        <span>
                            <input id="form__checkbox" title="Нужно принять соглашение" name="consent" type="checkbox" checked>
                            <i></i>
                        </span>
                        <a href="#consent_form" class="popup consent">Нажимая кнопку «Получить консультацию», я даю свое согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей, определенных в Согласии на обработку персональных данных</a>
                    </label>
                </div>
				<button type="submit" class="red_btn">получить консультацию</button>
			</form>


Существующая валидация:
$(".validate").each(function() {
        var it = $(this);
        it.validate({
            rules: {
                tel: {required: true},
                email: {required: true},
                consent : {required: true}
            },
            messages: {},
            errorPlacement: function(error, element) {},
            submitHandler: function(form) {
                var thisForm = $(form);

                $.ajax({
                    type: "POST",
                    url: thisForm.attr("action"),
                    data: thisForm.serialize()
                }).done(function() {
                    $.fancybox({
                        href: '#thanks',
                        wrapCSS: "popup",
                        openEffect: "fade",
                        closeEffect: "fade",
                        helpers: {
                            overlay: {
                                locked: false
                            }
                        }
                    });
                    thisForm.find("input:not([type=hidden], [type=radio])").val("");
                });
                return false;
            },
            success: function() {},
            highlight: function(element, errorClass) {
                $(element).parent().addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parent().removeClass('error');
            }
        })
    });


Планируется:
  1. Обязательный к заполнению - телефон или емейл, Но можно и оба отправить
  2. Если чек бокс отмечен - отправляем форму
  3. Если чек бокс не отмечен - вызываем лист соглашения (fancybox, а в нем текст и 2 кнопки - принять/не принять).
  4. Лист соглашения - при приеме соглашения форма с веденными ранее данными отправляется. Если не соглашается - делаем выход из соглашения и закрываем всё (fancybox.close)

Помогите пожалуйста с реализацией, нет ни кого рядом кто опытом может поделиться.

P.S. consent : {required: true} - Эта проверка не работает, форма все равно отправляет данные
Ответить с цитированием
  #8 (permalink)  
Старый 20.07.2017, 17:17
Интересующийся
Отправить личное сообщение для DjonyBastone Посмотреть профиль Найти все сообщения от DjonyBastone
 
Регистрация: 20.07.2017
Сообщений: 10

Народ, помогите пожалуйста разобраться. Без помощи ни как
Ответить с цитированием
  #9 (permalink)  
Старый 20.07.2017, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

DjonyBastone,
информация к размышлению ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
  <script>
$(function() {
$.validator.setDefaults({
     submitHandler: function () {
         alert("Всё ок!");
     }
 });


$.validator.addMethod("always", function (value, element) {
         return  $('[name="email"]').val().trim()||$('[name="tel"]').val().trim()
     },
     "email или телефон нужно заполнить")


$(".validate").validate({
         rules: {
             consent : {required: true},
             tel: {always: true},
             email: {always: true}
         }
     })
});
  </script>
</head>

<body>
<form action="form.php" class="validate" >
        <h3>Заказать консультацию <span>специалиста</span></h3>
        <p>Оставьте контактные данные и в течении 5 минут вам перезвонит опытный специалист!</p>
        <div class="wrap_input">
          <input type="text" name="name" placeholder="Введите Ваше имя" required>
          <i class="fa fa-user" aria-hidden="true"></i>
        </div>
        <div class="wrap_input">
          <input type="email" name="email" placeholder="Введите Ваш email">
          <i class="fa fa-phone" aria-hidden="true"></i>
        </div>
        <div class="wrap_input">
          <input type="tel" name="tel" placeholder="Введите Ваш телефон">
          <i class="fa fa-phone" aria-hidden="true"></i>
        </div>
                <div class="form__checkbox">
                    <label for="form__checkbox">
                        <span>
                            <input id="form__checkbox" title="Нужно принять соглашение" name="consent" type="checkbox" checked>
                            <i></i>
                        </span>
                        <a href="#consent_form" class="popup consent">Нажимая кнопку «Получить консультацию», я даю свое согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей, определенных в Согласии на обработку персональных данных</a>
                    </label>
                </div>
        <button type="submit" class="red_btn">получить консультацию</button>
      </form>


</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 20.07.2017, 18:58
Интересующийся
Отправить личное сообщение для DjonyBastone Посмотреть профиль Найти все сообщения от DjonyBastone
 
Регистрация: 20.07.2017
Сообщений: 10

Спасибо, 1 пункт вопроса решен. Это очень хорошо

Остались пункты с чек-боксами - 2, 3, 4
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация формы работает не совсем так Batyabest Events/DOM/Window 12 26.11.2016 02:07
Валидация формы vierhein jQuery 0 28.02.2014 16:40
Валидация формы в зависимости от значения radio batton housewm Events/DOM/Window 1 10.01.2014 18:46
Валидация формы Ваяс Элементы интерфейса 8 11.07.2012 15:20
Валидация формы dmsuslov jQuery 4 05.11.2010 16:12