Форум

bezverkhy · #1 (**permalink**) 12.06.2015, 06:47

Я не знаю, в чём дело, пытаюсь сделать банальную проверку на заполненность формы, а ничего не работает. Помогите найти ошибку!

<div id = "content" class="f_left">
<form>
			<div class="yourName">
			<p><b>Ваше имя <em>*</em></b><br>
			<input type = "text" name = "login"  size="50" value="" />          </p>
 <div class="button f_left">
<button type = "submit" id="send"                                                      class="color_button b3radius">Регистрация</button>
</div>
</form>
			</div>

Когда я жму на кнопку, ничего не происходит

$('form').submit(function(){
			$(this).find('.error').remove();
				if($(this).find('input[type=text]').val()==' '){
					.before('<div class="error">Enter</div>');
					return false;
}

laimas · #2 (**permalink**) 12.06.2015, 07:14

Зачем так писать type = "text" name = "login", расставляя лишние пробелы?

А это ошибка:
if($(this).find('input[type=text]').val()==' '){
.before('<div class="error">Enter</div>');
return false;
}

После кого? Должен быть указан объект:

$(this).before ...

А значения проверять надо так:

if($.trim($(this).find('input:text').val())) ....

то есть удаляя по краям пробелы, и если после этого поле пустое, значит ошибка, ведь просто один пробел, это не значение, если только не определено нечто специальное для него.

bezverkhy · #3 (**permalink**) 12.06.2015, 08:09

Ничего не получается. уже с десяток способов попробовал. Ладно, спасибо за помощь, удалю и буду уроки на ютубе смотреть

laimas · #4 (**permalink**) 12.06.2015, 10:06

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

буду уроки на ютубе смотреть

Книжки лучше читайте, а не мультики смотрите. Ошибки в и коде вашем, и в верстке.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.error {
    color: #f00;
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('form').submit(function() {
        $(this).prev().remove();
        if($.trim(!$(this).find('input:text').val())) {
            $(this).before('<div class="error">Error</div>');
            return false;
        }
    });
});
</script>     
</head> 

<body>
<div id="content" class="f_left">
<form>
    <div class="yourName">
        <p><b>Ваше имя <em>*</em></b><br>
            <input type="text" name="login"  size="50" value="" />
        </p>
        <div class="button f_left">
            <button type="submit" id="send" class="color_button b3radius">Регистрация</button>
        </div>
    </div>
</form>
</body> 
</html>

dd_smol · #5 (**permalink**) 12.06.2015, 10:11

Вам выше пояснили уже что ошибки синтаксические. Откройте консоль (F12) и все увидите. Когда копируете и вставляете куски кода будите предельно внимательны.

Возможно вы хотели что-то в этом роде:

jQuery(function($) {
	$('form').submit(function(e) {
		var inputText = $('input[type=text]', this);
		$('.error', this).remove();
		
		if ($.trim(inputText.val())) {
			inputText.before('<div class="error">Ошибка</div>');
			return false;
		}
	});
});

bezverkhy · #6 (**permalink**) 12.06.2015, 13:54

Да, извините, что с ошибками копировал, хотел исправить, но не нашёл, как редактировать свою запись

У меня в задании сказано, чтобы каждый инпут был отдельно в диве. А как сделать, чтобы ограничивался с 5 до 11 символов. И кстати я как раз по учебнику и делал, просто пытался адаптировать под свою форму и какую-то ерунду наделал

dd_smol · #7 (**permalink**) 12.06.2015, 14:50

Вариантов полно к примеру.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			$('#test')
				.keyup(function() {
					var len = this.value.length;
					$(this).css('border-color', ( len < 5 || len > 11 ) ? 'red' : 'green');
				}).keyup();
		});
	</script>
</head>
<body>
	<input type="text" id="test" />
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript