Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить текст рядом с полем для ввода? / 8 сообщений из 8, страница 1 из 1
21.04.2007, 12:28
    #34477929
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Здравствуйте.

При проверке полей формы, нужно сделать что бы если поле заполнено не верно (проверяется JavaScript-ом) то рядом с этим полем появлялся текст ошибки (типа: "Не указали имя...")

Сейчас это делаю так

function verification(target,outlet){
function mark(){
target.className='text_error';
target.value = '';
target.focus();
outlet.className='status_error';
}
if (target.value.trim() == ''){
mark();
outlet.innerHTML ='пустое значение';
return false;
}
if (target.value.length > 15){
mark();
outlet.innerHTML ='не более 15 символов';
return false;
}
target.className='';
return true;
}

target - это поле которое необходимо проверить
outlet - контейнер div(span) куда выводится текст ошибки

mark() - используется для подсветки не прошедшего проверку поля.

Что бы вывести сообщение об ошибке нужно заранее создать рядом с каждым полем контейнер div(span), а потом передавать функции указатель на него.

Если полей пять этот метод можно считать приемлемым, но если их уже десять...
Да и хочется сделать универсальную функцию проверки, что бы не нужно было заранее для каждого поля заготавливать контейнер div(span) для вывода текста ошибки, что бы этот контейнер генерировался JavaScript-ом.

ВОПРОС:
Как разместить текст рядом с полем для ввода?


Спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2007, 12:33
    #34477932
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Здравствуйте.

При проверке полей формы, нужно сделать что бы если поле заполнено не верно (проверяется JavaScript-ом) то рядом с этим полем появлялся текст ошибки (типа: "Не указали имя...")

Сейчас это делаю так

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
function verification(target,outlet){
	function mark(){
		target.className='text_error';
		target.value = '';
		target.focus();
		outlet.className='status_error';
	}
	if (target.value.trim() == ''){
		mark();
		outlet.innerHTML ='пустое значение';
		return false;
	}
	if (target.value.length >  15 ){
		mark();
		outlet.innerHTML ='не более 15 символов';
		return false;
	}
	target.className='';
	return true;
}
target - это поле которое необходимо проверить
outlet - контейнер div(span) куда выводится текст ошибки

mark() - используется для подсветки не прошедшего проверку поля.

Что бы вывести сообщение об ошибке нужно заранее создать рядом с каждым полем контейнер div(span), а потом передавать функции указатель на него.

Если полей пять этот метод можно считать приемлемым, но если их уже десять...
Да и хочется сделать универсальную функцию проверки, что бы не нужно было заранее для каждого поля заготавливать контейнер div(span) для вывода текста ошибки, что бы этот контейнер генерировался JavaScript-ом.

ВОПРОС:
Как разместить текст рядом с полем для ввода?


Спасибо


Простите за дублирование, забыл подсветить код для лучшего восприятия.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2007, 15:37
    #34478066
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Проблема решена.

Написал небольшую функцию, которая
- меняет класс текстового поля (например в CSS можно прописать красную рамку) для выделения
- добавляет ниже текст ошибки


Код: plaintext
1.
2.
3.
4.
	function mark2(elementID, HTMLtex){
				var target = document.getElementById(elementID);
				target.className='text_error';
				target.insertAdjacentHTML('afterEnd', '<br/>'+HTMLtex);
		}


elementID - уникальный идентификатор поля для ввода (можно и любого другого элемента)
HTMLtex - текст ошибки (произвольный HTML код)

в CSS должен быть стиль text_error , например такой
.text_error{
border: 1px solid #FF0000;
}

Пример использования:
На странице размещаем поле с ID
<input type="text" id="surname" value="qwe"/>

В каком-либо обработчике вызывает функцию mark2
mark2("surname",'Неверное имя');


Ну и что бы это все работало в FF надо подключить к страницу вот это:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
// insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement
// for Netscape  6 /Mozilla by Thor Larholm me@jscript.dk
// Usage: include this code segment at the beginning of your document
// before any other Javascript contents.

if(typeof HTMLElement!="undefined" && !
HTMLElement.prototype.insertAdjacentElement){
	HTMLElement.prototype.insertAdjacentElement = function
(where,parsedNode)
	{
		switch (where){
		case 'beforeBegin':
			this.parentNode.insertBefore(parsedNode,this)
			break;
		case 'afterBegin':
			this.insertBefore(parsedNode,this.firstChild);
			break;
		case 'beforeEnd':
			this.appendChild(parsedNode);
			break;
		case 'afterEnd':
			if (this.nextSibling) 
this.parentNode.insertBefore(parsedNode,this.nextSibling);
			else this.parentNode.appendChild(parsedNode);
			break;
		}
	}

	HTMLElement.prototype.insertAdjacentHTML = function
(where,htmlStr)
	{
		var r = this.ownerDocument.createRange();
		r.setStartBefore(this);
		var parsedHTML = r.createContextualFragment(htmlStr);
		this.insertAdjacentElement(where,parsedHTML)
	}


	HTMLElement.prototype.insertAdjacentText = function
(where,txtStr)
	{
		var parsedText = document.createTextNode(txtStr)
		this.insertAdjacentElement(where,parsedText)
	}
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2007, 15:53
    #34478077
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
function appendAfter(nodeId, str) 
{
 var node = document.getElementById(nodeId);
 var newNode = makeNode(str);

 if (node.parentNode)
  { 
    if (node.nextSibling)
       node.parentNode.insertBefore(newNode, node.nextSibling);
    else
       node.parentNode.appendChild(newNode);
  }
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2007, 15:54
    #34478078
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
http://www.liqintao.net/handbook/js2/LiB0073.html
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.04.2007, 15:56
    #34478080
LINUXER
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Alex_BBB
дада так.
не видел последний пост
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.04.2007, 19:08
    #34481637
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Такая вот проблема возникла.

Если пользователь дважды введет неверное значение, то и текст ошибки появится дважды.
Если ошибется 10 раз - то 10 надписей будет.
А нужна только одна, да и та должна изчезать после исправления ошибки.

Иными словами нужен метод позволяющий очищать текст под полем ввода .

Буду благодарен за идеи.
Спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.04.2007, 20:10
    #34481751
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить текст рядом с полем для ввода?
Вот так решил эту проблему.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
function unmark2(target,box){
	document.getElementById(target).className='';
	var box = document.getElementById(box);
	box.parentNode.removeChild(box);
}

function mark2(elementID, HTMLtex){
	var target = document.getElementById(elementID);
	var boxID = 'err_'+elementID;
	if (document.getElementById(boxID) != null) unmark2(elementID, boxID);
	target.className='text_error';
	target.insertAdjacentHTML('afterEnd', '<span id='+boxID+'><br/>'+HTMLtex+ '</span>');
}

Теперь mark2 создает контейнер SPAN с уникальным ID, который можно удалить. Этим и занимается функция unmark2
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить текст рядом с полем для ввода? / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 388ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1458414]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 58ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 43ms
get tp. blocked users:
 2ms
others: 243ms
total:  388ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]