Форум

Nikita21 · #1 (**permalink**) 13.10.2016, 11:58

Хотел сделать форму, которая проверяет три поля, одно постоянно, а два других, только если они не заполнены.
При этом если заполнено mail ИЛИ phone, то форма отправляется. При этом на поле phone стоит маска. Кто знает как решить?

<form id="form_mid" class="big_form" action="php/send.php" method="post" novalidate="novalidate">
					
					<div class="form_mid_label">Напишите сферу вашего бизнеса</div>
					<input type="text" name="salon" placeholder="например,  автосалон">
					
					<div class="form_mid_label">Напишите ваш сайт, если есть</div>
					<input type="text" name="site" placeholder="например,  mazzmedia.ru">
					
					<div class="form_mid_label">Укажите имеющийся бюджет на тест</div>
					<input type="text" name="budjet" placeholder="например, 7000 руб">
					
					<div class="form_mid_label">Ваше имя</div>
                    <input type="text" name="name" placeholder="">
					
					<div class="form_mid_label mail">E-mail, если есть</div>
                    <input type="text" name="email" placeholder="например,  info@mazzmedia.ru">
					
					<div class="form_mid_label phone">Контактный номер</div>
					<input type="text" name="phone" placeholder="+7 (___) ___-__-__">
					
                    <button>ОТПРАВИТЬ</button>
                </form>

$("#form_mid").validate({
		rules: {
			budjet: {required: true},
			phone: {required: true},
			email: {required: false, email: true}
		},	
		messages: {
			budjet: {required: false},
			phone: {required: false, phone: false},
			email: {required: false, email: false}
		},
		submitHandler: function(form) {
			sendForm(form);
		}
	});

Сам я пробовал решить таким способом, но не получилось:

$("#form_mid button").click(function(){
	if ($("#form_mid input[name='email']").val == ""){
	$("#form_mid").validate({
		rules: {
			budjet: {required: true},
			phone: {required: true},
			email: {required: false, email: true}
		},	
		
		messages: {
			budjet: {required: false},
			phone: {required: false, phone: false},
			email: {required: false, email: false}
		},
		submitHandler: function(form) {
			sendForm(form);
		}
	});
	}
	else if ($("#form_mid input[name='email']").val != ""){
	$("#form_mid").validate({
		rules: {
			budjet: {required: true},
			phone: {required: false},
			email: {required: true, email: true}
		},	
		
		messages: {
			budjet: {required: false},
			phone: {required: false, phone: false},
			email: {required: false, email: false}
		},
		submitHandler: function(form) {
			sendForm(form);
		}
	});
	}	
	});

рони · #2 (**permalink**) 13.10.2016, 12:24

Сообщение от Nikita21

$("#form_mid input[name='email']").val()

красное нужно -- но в целом код не рабочий, нужно отменить всплытие, и не знаю сработает ли смена правил

Nikita21 · #3 (**permalink**) 13.10.2016, 12:34

Скобки были, это я по памяти писал, забыл)
В целом неправильно наверно)

warren buffet · #4 (**permalink**) 13.10.2016, 12:40

Сообщение от Nikita21

budjet: {required: true}

Это сразу в инпут пиши

<input type="text" name="budjet" required="required" placeholder="например, 7000 руб">

Ну и все остальное, что может быть полезным - в атрибуты. Потом просто берешь элемент и проверяешь все ли соответствует.

warren buffet · #5 (**permalink**) 13.10.2016, 12:42

Если забить на правильность, в required можно записать минимальную длину, например required="3" - минимум 3 букавы. А если юзать pattern, туда вообще почти все можно запихать.

рони · #6 (**permalink**) 13.10.2016, 12:55

Nikita21,
вариант ... маску и length > 3 сами добавьте

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
  <style type="text/css">
  label.error {
    position: absolute;
    margin-left: 12px;
  }

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
  <script>

$(function () {
$.validator.addMethod("requiredphone", function (value, element) {
        return value.length || $.trim($('[name="email"]').val());
    },
    " Заполните это поле!!!");
$.validator.addMethod("requiredemail", function (value, element) {
        return value.length || $.trim($('[name="phone"]').val());
    },
    " Заполните это поле!!!");

 $("#form_mid").validate({
    rules: {
      budjet: {required: true},
      phone: {requiredphone: true},
      email: {requiredemail: true}
    },
    submitHandler: function(form) {
      sendForm(form);
    }
  });


});
  </script>
</head>
<body>
<form id="form_mid" class="big_form" action="php/send.php" method="post" novalidate="novalidate">

          <div class="form_mid_label">Напишите сферу вашего бизнеса</div>
          <input type="text" name="salon" placeholder="например,  автосалон">

          <div class="form_mid_label">Напишите ваш сайт, если есть</div>
          <input type="text" name="site" placeholder="например,  mazzmedia.ru">

          <div class="form_mid_label">Укажите имеющийся бюджет на тест</div>
          <input type="text" name="budjet" placeholder="например, 7000 руб">

          <div class="form_mid_label">Ваше имя</div>
                    <input type="text" name="name" placeholder="">

          <div class="form_mid_label mail">E-mail, если есть</div>
                    <input type="text" name="email" placeholder="например,  info@mazzmedia.ru">

          <div class="form_mid_label phone">Контактный номер</div>
          <input type="text" name="phone" placeholder="+7 (___) ___-__-__">
          <br>
                    <button>ОТПРАВИТЬ</button>
</form>

</center>

</body>
</html>

Nikita21 · #7 (**permalink**) 13.10.2016, 13:37

Видел подобное решение в статье, переведенной через гугл, ниче не понял)

Спасибо большое, все работает. =)

Форум

Справочник

Discord чат

Курсы javascript