Проверка формы. Выделение цветом пустого поля ввода .

Подскажите как сделать такую вот вещь...
Есть форма которая содержит несколько полей ввода, например

Код

<input type="text" name="text" style="border: 1px solid #000000;">

, при заполнении таких вот полей должно обрабатываться следующее событие, если поле ввода пустое то style="border: 1px solid red;", а как только будет введен хотя бы один символ style="border: 1px solid #000000;" т.е. пока поле пустое оно обведено красным, когда не пустое, то черным.
У меня есть вот такие наброски:

Код

<input type="text" name="text" onKeyPress="if (this.value.empty = true) { this.style.border = '1px solid #000000' }"; style="border: 1px solid red;">

но не работает например когда страница обновилась, данные введены в поле, но оно сново красное...

подскажите плиз, что где не правильно?

Это сообщение отредактировал(а) Aliance - 21.3.2005, 18:00

Цитата

когда страница обновилась

Сделай в

Код

<body onLoad="check()">

потом в функции check определяем, пустое ли поле и присваиваем соотв. стиль.

Цитата

this.value.empty = true

- наверное, все-таки == ?
Добавлено @ 13:42
И лучше использовать не onKeyPress, а onChange, чтобы он на стрелки и прочее не реагировал.

Может вот так:

Код

<input type="text" name="text" onKeyPress="if (this.value != '') { this.style.border = '1px solid #000000' } else { this.style.border = '1px solid #ff0000' }" style="border: 1px solid red;">

Помогу: http://forum.vingrad.ru/index.php?showtopic=36336

нашел вот такой скрипт, но незнаю, как его заточить под несколько инпутов

Код

<script> function isNotEmpty(elemId) {     var elem = document.getElementById(elemId);     var str = elem.value;     var re = /.+/;     if(!str.match(re)) {         elem.style.border = '1px solid red';         return false;     } else {         elem.style.border = '1px solid black';         return true;     } } </script> <body onload="isNotEmpty('str')"> <input type="text" id="str" name="text" onkeyup="isNotEmpty(this.id)">  </body>

Код

<input type="text" id="str1" name="text1" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str2" name="text2" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str3" name="text3" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str4" name="text4" onkeyup="isNotEmpty(this.id)"> <!-- и так далее........ -->

Добавлено @ 17:20

Цитата(Guest @ 15.3.2005, 17:15)

<body onload="isNotEmpty('str')">

Это не нужно...

Цитата(Aliance @ 15.3.2005, 16:20)

Это не нужно...

Нужно, ведь после загрузки документа нужно обвести пустое красным. Заранее нельзя ибо браузер сам автоматом заполнить может, проверка по onLoad самое то.

И как тогда правильно? Если делать так:

Код

<script> function isNotEmpty(elemId) {     var elem = document.getElementById(elemId);     var str = elem.value;     var re = /.+/;     if(!str.match(re)) {         elem.style.border = '1px solid red';         return false;     } else {         elem.style.border = '1px solid black';         return true;     } } </script> <body onload="isNotEmpty('str')"> <input type="text" id="str1" name="text1" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str2" name="text2" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str3" name="text3" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str4" name="text4" onkeyup="isNotEmpty(this.id)"> </body>

пишет, что ошибка в 3 линии.

Гость_Dan, зарегистрируйтесь!

Цитата

пишет, что ошибка в 3 линии.

При загрузке страницы скрипт пытается проверить объект с ID=str, которого у вас естественно нет... самый просто вариант - сделать несколько вызовов функции, подставляя все ID:

Код

<script> function isNotEmpty(elemId) {     var elem = document.getElementById(elemId);     var str = elem.value;     var re = /.+/;     if(!str.match(re)) {         elem.style.border = '1px solid red';         return false;     } else {         elem.style.border = '1px solid black';         return true;     } } </script> <body onload="isNotEmpty('str1');isNotEmpty('str2');isNotEmpty('str3');isNotEmpty('str4');"> <input type="text" id="str1" name="text1" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str2" name="text2" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str3" name="text3" onkeyup="isNotEmpty(this.id)"> <input type="text" id="str4" name="text4" onkeyup="isNotEmpty(this.id)"> </body>

Но это совершенно неоптимальный вариант... Попробуйте довести его до ума!

Sardar
Т.е. выделение происходит после загрузки? Хм... но тогда в первый раз все будут выделены...
Извеняюсь, я значит не понял сути...

Пишем универсальный валидатор текстовых полей:

Код

<script type="text/javascript"> /** * Обрабатывет все элементы после загрузки */ function initFormCheck() {   var inps=document.getElementsByTagName("INPUT");   for(var i=0; i<inps.length; i++) {     if(inps[i].getAttribute("testreg")==null) continue;     else inps[i].onkeyup=inputTextCheck;      inputTextCheck(inps[i]);   } } /** * Проверка. Реги и прочую инфу берём из аттрибутов тега. */ function inputTextCheck(obj) {   var o=(obj&&obj.tagName)? obj: this;   var reg=new RegExp("^"+o.getAttribute("testreg")+"$");   if(reg.test(o.value)) {     o.className=o.getAttribute("passclass");     return true;   } else {     o.className=o.getAttribute("failclass");     return false;   } } </script> <body onload="initFormCheck();"> <!-- пример: допускаем только цифры 0-9 --> <input type="text" id="str1" name="text1" testreg="[0-9]+" failclass="fout" passclass="pass"> <!-- допускаем что угодно --> <input type="text" id="str2" name="text2" testreg=".+" failclass="fout" passclass="pass"> <!-- не обрабатываем поле --> <input type="text" id="str5" name="text5"> <!-- как видно  для обработки требудется три параметра: рег, имя стиля при правильной проверке и имя стиля при ошибке --> </body>

Стили можно задать какие угодно, по задаче это:

Код

<style type="text/css"> .pass {   border: 1px solid black; } .fout {   border: 1px solid red; } </style>

Sardar
Спасибо! Мне пригодится.