Форум

Phoenix13 · #1 (**permalink**) 25.11.2014, 22:25

как сделать проверку ввода в поля Имя, Фамилия, Эл. Почта, пароль?

<!doctype html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js">
</script>
<link rel="stylesheet" type="text/css" href="new.css" />
</head>
<body>
<div class="container">
	<div><div class="texts"> Name </div> <input type="text" name="Name" class="inp" id="text" /> </div>
	<div><div class="texts"> Surname </div> <input type="text" name="Surname" class="inp" id="text1"/></div>
	<div><div class="texts"> City </div> <input type="text" name="City"class="inp" id="text2"/></div>
	<div><div class="texts"> Email </div> <input type="text" name="Email" class="inp" id="text"/></div>
	<div><div class="texts"> Password </div> <input type="password" name="Pass" class="inp"/></div>
	<div><div class="texts"> Repeat password </div> <input type="password" name="rpt" class="inp"/></div>
</div>
<div class="submit">
 <input type="button" name="button" value="register" class="button"/>
 </div>
 <script>
$(document).ready(function(){
	$('.button').click(function(){
	var name =$("#text").val();
		if (name=="aaa") {alert('asdasd');}
        else { $("#text").css('border', 'red 1px solid');}
	});
	});
</script>
</body>
</html>

danik.js · #2 (**permalink**) 26.11.2014, 07:23

<form>
<input type="text" name="name" placeholder="Ваше имя" required>
<button type="submit">Отправить</button>
</form>

Phoenix13 · #3 (**permalink**) 26.11.2014, 13:23

Я про jquery код спрашиваю. Как написать код проверки полей?

danik.js · #4 (**permalink**) 26.11.2014, 14:16

По документации к плагину jquery.validate должно работать вот так:

<!DOCTYPE html>
<form>
<input type="text" name="name" placeholder="Ваше имя" required>
<button type="submit">Отправить</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js">
<script>
$('form').validate();
</script>

Но у меня что-то не работает.

kostyanet · #5 (**permalink**) 26.11.2014, 14:41

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

как сделать проверку ввода в поля Имя, Фамилия, Эл. Почта, пароль?

По каким критериям собираетесь проверять? На пусто что ли и все?

рони · #6 (**permalink**) 26.11.2014, 14:41

Сообщение от danik.js

Но у меня что-то не работает.

строка 7

рони · #7 (**permalink**) 26.11.2014, 15:03

всё работает

<!DOCTYPE html>
<form>
<input type="text" name="name" placeholder="Ваше имя" required>
<button type="submit">Отправить</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script>
$('form').validate();
</script>

Phoenix13 · #8 (**permalink**) 26.11.2014, 16:56

уже сделал
Спасибо всем

$(document).ready(function(){
	$('.button').click(function(){
		$('.inp').each(function(){
			var text = $('#text').val();
			if( /[^a-zA-Z]/.test(text)||text.length<=1){
			$('#text').css('background-color','#FF7171');
			}
			else {
			$('#text').css('background-color','#C6FFB3');}
		});
		$('.inp').each(function(){
			var text1 = $('#text1').val();
			if( /[^a-zA-Z]/.test(text1)||text1.length<=1){
			$('#text1').css('background-color','#FF7171');}  
			else {
			$('#text1').css('background-color','white')}
		});
		$('.inp').each(function(){
			var text2 = $('#text2').val();
			if( /[^a-zA-Z]/.test(text2)||text2.length<=1){
			$('#text2').css('background-color','#FF7171')}
			else {
			$('#text2').css('background-color','white')}
			});
		$('.inp').each(function(){
			var text3 = $('#text3').val();
			var filter = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
			if (filter.test(text3)){
			$('#text3').css('background-color','white')}
			else if(text3.length<=1){
			$('#text3').css('background-color','#FF7171')}
			else {
			$('#text3').css('background-color','#FF7171')}
		});
		$('.inp').each(function(){
			var text5 = $('#text5').val();
			var text4 = $('#text4').val();
			if (text5.length<=1||text4.length<=1||text5!=text4){
			$('#text5').css('background-color','#FF7171')
			$('#text4').css('background-color','#FF7171')}
			else{
			$('#text4').css('background-color','white')
			$('#text4').css('background-color','white')}
		});
	});
});

danik.js · #9 (**permalink**) 26.11.2014, 17:07

Phoenix13, а нафига тогда jquery.validate подключал

Этот плагин позволяет то же самое, но в декларативном стиле, используя атрибуты required, minlength и pattern.
Правда как сделать проверку повторного ввода пароля - надо смотреть в документацию.

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

уже сделал

"Сделал" - тут не очень подходит. Скорее "наговнокодил" )

Phoenix13 · #10 (**permalink**) 09.12.2014, 14:58

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

Форум

Справочник

Discord чат

Курсы javascript