Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Проверка формы. Выделение цветом пустого поля ввод

Автор: Гость_Dan 15.3.2005, 13:25

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

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

Код


<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;">

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

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

Автор: batigoal 15.3.2005, 13:40

Цитата

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

Сделай в

Код


<body onLoad="check()">

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

Цитата

this.value.empty = true

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

Автор: GoodBoy 15.3.2005, 13:45

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

Код

<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;">

Автор: Aliance 15.3.2005, 16:36

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

Автор: Guest 15.3.2005, 17:15

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

Код

<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>

Автор: Aliance 15.3.2005, 17:20

Код


<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)

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

Автор: Sardar 16.3.2005, 01:26

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

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

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

Автор: Гость_Dan 16.3.2005, 09:52

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

Код

<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 линии.

Автор: GoodBoy 16.3.2005, 13:08

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

Цитата

пишет, что ошибка в 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>

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

Автор: Aliance 16.3.2005, 16:13

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

Автор: Sardar 17.3.2005, 01:32

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

Код

<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>

Автор: batigoal 17.3.2005, 11:01

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