Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2014, 13:28
Интересующийся
Отправить личное сообщение для Phoenix13 Посмотреть профиль Найти все сообщения от Phoenix13
 
Регистрация: 18.11.2014
Сообщений: 14

Как сделать чтобы после исправления ошибки текст не оставался красным
вот такой код проверки полей.
<!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="text3"/></div>
	<div><div class="texts"> Password </div> <input type="password" name="Pass" class="inp" id="text4"/></div>
	<div><div class="texts"> Repeat password </div> <input type="password" name="rpt" class="inp" id="text5"/></div>
</div>
<div class="submit">
 <input type="button" name="button" value="register" class="button"/>
 </div>
 <span>
  <script>
$(document).ready(function(){
	$('.button').click(function(){
		var text = $('#text').val();
			if( /[^a-z]/.test(text)){
				$('#text').after('').css('color','red');} 
					else {
						var text1 = $('#text1').val();
							if( /[^a-z]/.test(text1)){
									$('#text1').after('').css('color','red');}  
										else {
											var text2 = $('#text2').val();
												if( /[^a-z]/.test(text2)){
													$("#text2").after('').css('color','red');}
													else {
														var text3 = $('#text3').val();
														var filter = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
														if (filter.test(text3)){
														$("#text3").after('')}
														else {
														$("#text3").after('Wrong mail adress')}
														};
		}
	};
	
});
});
	</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2014, 14:23
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Твой код вызывает боль при взгляде на него.
Сделай по-нормальному, иначе, подозреваю, помощи ни от кого не дождешься..
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2014, 16:59
Интересующийся
Отправить личное сообщение для Phoenix13 Посмотреть профиль Найти все сообщения от Phoenix13
 
Регистрация: 18.11.2014
Сообщений: 14

$(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')}
		});
	});
});

как-то так?
Ответить с цитированием
  #4 (permalink)  
Старый 26.11.2014, 17:09
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Уже не так больно смотреть, но плакать все равно хочется...
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2014, 17:12
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

$('.inp').each(function(){..
$('.inp').each(function(){..
$('.inp').each(function(){..
$('.inp').each(function(){..
$('.inp').each(function(){..


Ты че, с дубу чтоли рухнул? По пять (каждый инпут) раз вызывать каждый фрагмент кода)
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2014, 04:57
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Простой валидатор. Использует атрибуты html5 валидации. Но поддержка html5 браузером не требуется. По идее должно работать в IE9+
В современных браузерах валидация будет работать и без js (кроме проверки пароля).
<!DOCTYPE html>
<style>
    input{
        border: 1px solid #777;
    }
    input:focus{
        outline: none;
        box-shadow: 0 0 5px rgb(179, 179, 179);
    }
    .state-error{
        border-color: red;
    }
    .state-success{
        border-color: green;
    }
</style>
<form action="">
    <p><input placeholder="Логин" type="text" name="name" required="" pattern="[a-zA-Z]{2,64}" /></p>
    <p><input placeholder="E-mail" type="email" name="email" required="" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+" /></p>
    <p><input placeholder="Пароль" type="password" name="password" required="" pattern=".{2,64}" /></p>
    <p><input placeholder="Пароль еще раз" type="password" name="passwordConfirm" required="" /></p>
    <p><button type="submit">Отправить</button></p>
</form>
<script>
    function FormValidator(form, rules) {
        form.noValidate = true;
        form.addEventListener('input', this);
        form.addEventListener('submit', this);
        this.form = form;
        this.rules = rules;
    }
    FormValidator.prototype = {
        constructor: FormValidator,
        handleEvent: function(event) {
            switch (event.type) {
                case 'input':
                    this.validateInput(event.target);
                    break;
                case 'submit':
                    if (!this.validateInputs(this.form.elements))
                        event.preventDefault();
                    break;
            }
        },
        validateInput: function(input) {
            var rule = this.rules[input.name];
            var success = this.defaultRule(input);
            if (rule)
                success = rule(input) && success;

            if (success) {
                input.setAttribute('aria-invalid', 'false');
                input.classList.remove('state-error');
                input.classList.add('state-success');
            } else {
                input.setAttribute('aria-invalid', 'true');
                input.classList.remove('state-success');
                input.classList.add('state-error');
            }
            return success;
        },
        validateInputs: function(inputs) {
            var success = true;
            for (var i = 0; i < inputs.length; i++) {
                success = this.validateInput(inputs[i]) && success;
            }
            return success;
        },
        defaultRule: function(input) {
            var value = input.value;
            var required = input.hasAttribute('required');
            var pattern = input.getAttribute('pattern') || '.*';
            return value ? new RegExp('^' + pattern + '$').test(value) : !required;
        }
    };
</script>
<script>
    var form = document.querySelector('form');
    var validator = new FormValidator(form, {
        'passwordConfirm': function(input) {
            return input.value == input.form.password.value;
        }
    });
</script>
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 27.11.2014 в 05:04.
Ответить с цитированием
  #7 (permalink)  
Старый 27.11.2014, 10:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

danik.js,
а так можно или есть какая-то разница ?
validateInputs: function(inputs) {
     for (var i = 0; i < inputs.length; i++) {
         if (!this.validateInput(inputs[i])) return false;
     }
     return true;
 },
Ответить с цитированием
  #8 (permalink)  
Старый 27.11.2014, 10:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

рони, тогда не все ошибочные поля подсветятся же.
Ксати, в коде явно не хватает фильтра для инпутов. А то щас и кнопка submit тоже валидируется )
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 27.11.2014, 10:36
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Про IE9 я загнул. Нужно подключать либо classList.js либо не использовать в коде classList. Это касается не только IE9 но и других старых не-IE браузеров.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 27.11.2014, 10:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от danik.js
рони, тогда не все ошибочные поля подсветятся же.
понял, спасибо! обрабатываем все поля, но сохраняем отрицательный результат, хотя бы одной обработки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтобы когда убираю галочку с чекбокса то текст убралось:) ? sarik Общие вопросы Javascript 9 27.02.2013 15:03
Как сделать так чтобы в место value использовать url чтобы картинка менялось через зн sarik Общие вопросы Javascript 9 22.02.2013 13:24
Как сделать исчезание рекламы после клика по ней rembo1978 Элементы интерфейса 1 10.11.2012 05:27
Как сделать чтобы text() брал только текст родителя без текста вложенных контейнеров? Andrey32 jQuery 3 23.05.2009 01:33
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24