Javascript-форум - Валидация формы, не работает

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Валидация формы, не работает (https://javascript.ru/forum/jquery/56361-validaciya-formy-ne-rabotaet.html)

Валидация формы, не работает

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

<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;
}

Зачем так писать 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

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

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

<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>

Вам выше пояснили уже что ошибки синтаксические. Откройте консоль (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;
		}
	});
});

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

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

<!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>