powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить текст рядом с полем для ввода?
8 сообщений из 8, страница 1 из 1
Как разместить текст рядом с полем для ввода?
    #34477929
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
Как разместить текст рядом с полем для ввода?
    #34477932
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
Как разместить текст рядом с полем для ввода?
    #34478066
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
Как разместить текст рядом с полем для ввода?
    #34478077
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
Как разместить текст рядом с полем для ввода?
    #34478078
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
http://www.liqintao.net/handbook/js2/LiB0073.html
...
Рейтинг: 0 / 0
Как разместить текст рядом с полем для ввода?
    #34478080
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alex_BBB
дада так.
не видел последний пост
...
Рейтинг: 0 / 0
Как разместить текст рядом с полем для ввода?
    #34481637
Alex_BBB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Такая вот проблема возникла.

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

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

Буду благодарен за идеи.
Спасибо.
...
Рейтинг: 0 / 0
Как разместить текст рядом с полем для ввода?
    #34481751
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
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить текст рядом с полем для ввода?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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