Форум

bonny · #1 (**permalink**) 11.06.2017, 18:26

Ребята, помогите скрипт написать.
Есть поле с проверкой

<input id="email" type="email" name="jform[contact_email]" class="validate required" onkeyup="checkSendBox();" required>
<label for="email" data-error="неверно" data-success="правильно">Email <span class="required">*</span></label>
</div>

Мне нужен скрипт, который отключает активность кнопки, если поле говорит, что нет валидации.
Ранее я такой скрипт сделал для проверки полей на длину. Ещё бы добавить валидность email.
Сам я что-то пыхтел и всё равно не получилось.

function checkSendBox() {
			var name = $('#last_name').val();
			var email = $('#email').val();
			var text = $('#textarea1').val();
			
			if (name.length >= 2 && email.length >= 5 && text.length >= 5)
				$('#sendButton').removeAttr('disabled');
			else
				$('#sendButton').attr('disabled','disable');
		}

j0hnik · #2 (**permalink**) 11.06.2017, 19:18

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<input id="email" type="email" value="">
<button id="sendButton" disabled>Отправить</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$('#email').keyup(function(){
		$('#sendButton').prop('disabled', $(this).val().length<=5);
	});
</script>
</body>
</html>

bonny · #3 (**permalink**) 11.06.2017, 19:37

j0hnik, так она только на валидацию по длине?
Так я такое сделал.
Мне нужно валидацию на допустимые символы email.
Поле уже само проверяет его на символы и выводит сообщение вот. Вот я бы хотел, чтобы скрипт эту валидацию видел и включал/выключал кнопку.
Это поле с html5 - http://materializecss.com/forms.html
картинка - http://prntscr.com/fij59m

j0hnik · #4 (**permalink**) 11.06.2017, 20:40

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<input id="email" type="email">
<button id="sendButton" disabled>Отправить</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/;
	$('#email').keyup(function(){
		$('#sendButton').prop('disabled', !pattern.test($(this).val()));
	});
</script>
</body>
</html>

bonny · #5 (**permalink**) 11.06.2017, 23:18

Вот это уже рабочая тема. Тоже делал с проверкой на символы, но что-то не пошло.
Потом решил, что где-то должна быть в html5 фигня, которая сообщает что не валидно. Ну и так подойдёт.

bonny · #6 (**permalink**) 12.06.2017, 11:40

j0hnik, как такой код объединить ещё с проверкой полей #last_name, #textarea1, которые уже на длину. Все условия должны выполнятся.

j0hnik · #7 (**permalink**) 12.06.2017, 13:24

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<input id="lastName" type="text">
<input id="email" type="email">
<textarea id="textarea1" type="text"></textarea>

<button id="sendButton" disabled>Отправить</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/;
	$('#email, #lastName, #textarea1').keyup(function(){
		$('#sendButton').prop('disabled', !pattern.test($('#email').val()) || $('#lastName').val().length<=5 || $('#textarea1').val().length<=5);
	});
</script>
</body>
</html>

все просто, все условия надо проверить

bonny · #8 (**permalink**) 12.06.2017, 13:34

Благодарю. Работает как нужно.

Форум

Справочник

Discord чат

Курсы javascript