Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.04.2012, 16:18
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

Валидация формы
Здравствуйте, собственно сам код:

<html>

<head>
<style type="text/css">
.mono {
    border: 1px solid #666666;
    font-family: Courier,monospace,Arial,Helvetica,Sans-Serif;
    font-size: 15px;
}
.monoerror {
    border: 1px solid #FF0000;
    font-family: Courier,monospace,Arial,Helvetica,Sans-Serif;
    font-size: 15px;
}
.numb_error {
	display: none;
	color: red;
}
.log_error {
	display: none;
	color: red;
}
</style>
</head>

<body>
<form name="forma1" id="forma1" action="javascript:alert('ok');" method="post">
<div id="numb_error" class="numb_error">Error Numb</div>
<input class="mono" type="text" maxlength="6" size="6" id="numb" name="numb">
<br>
<div id="log_error" class="log_error">Error Log</div>
<input class="mono" type="text" maxlength="6" size="6" id="log" name="log">
<br>
</form>
<input type="submit" value="click" onclick="goForm()">

<script type="text/javascript">
function goForm() {
var forma1 = document.getElementById('forma1');
var numb_error = document.getElementById('numb_error');
var numb = document.getElementById('numb');
var log_error = document.getElementById('log_error');
var log = document.getElementById('log');

if (numb.value == ""){
numb_error.style.display = "block";
numb.className = "monoerror";
return;
}
if (log.value == ""){
numb_error.style.display = "none";
numb.className = "mono";

log_error.style.display = "block";
log.className = "monoerror";
return;
}

log_error.style.display = "none";
log.className = "mono";
forma1.submit();
}
</script>
</body>

</html>


Подскажите пожалуйста как сделать чтоб при клике на незаполненный input class его менялся ?

т.е. юзер заполнил поля не верно, вылетело предупреждение с ошибкой и поле выделилось красным цветом, юзер кликает на это поле чтоб заполнить верно и предупреждение убирается и class поля меняется.
Подскажите плиз, не могу сообразить.
Ответить с цитированием
  #2 (permalink)  
Старый 26.04.2012, 17:01
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

<html>
 
<head>
<style type="text/css">
.mono {
    border: 1px solid #666666;
    font-family: Courier,monospace,Arial,Helvetica,Sans-Serif;
    font-size: 15px;
}
.monoerror {
    border: 1px solid #FF0000;
    font-family: Courier,monospace,Arial,Helvetica,Sans-Serif;
    font-size: 15px;
}
.numb_error {
    display: none;
    color: red;
}
.log_error {
    display: none;
    color: red;
}
</style>
</head>
 
<body>
<form name="forma1" id="forma1" action="javascript:alert('ok');" method="post">
<div id="numb_error" class="numb_error">Error Numb</div>
<input class="mono" type="text" maxlength="6" size="6" id="numb" name="numb">
<br>
<div id="log_error" class="log_error">Error Log</div>
<input class="mono" type="text" maxlength="6" size="6" id="log" name="log">
<br>
</form>
<input type="submit" value="click" onclick="goForm()">
 
<script type="text/javascript">
function goForm() {
var forma1 = document.getElementById('forma1');
var numb_error = document.getElementById('numb_error');
var numb = document.getElementById('numb');
var log_error = document.getElementById('log_error');
var log = document.getElementById('log');
 
if (numb.value == ""){
numb_error.style.display = "block";
numb.className = "monoerror";
numb.onclick = function(){this.className="mono";numb_error.style.display = "none";this.onclick=null}
return;
}
if (log.value == ""){
numb_error.style.display = "none";
numb.className = "mono";
log.onclick = function(){this.className="mono";log_error.style.display = "none";this.onclick=null}
log_error.style.display = "block";
log.className = "monoerror";
return;
}
 
log_error.style.display = "none";
log.className = "mono";
forma1.submit();
}
</script>
</body>
 
</html>

Последний раз редактировалось Раед, 26.04.2012 в 17:03.
Ответить с цитированием
  #3 (permalink)  
Старый 26.04.2012, 18:55
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

Спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 14.06.2012, 20:43
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

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

Подскажите пожалуйста как поправить чтоб если оба поля не были заполнены то ошибки вылетало две сразу, т.е. чтоб проверка была не по одному полю, а проверяло все сразу и выдавало результат.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Внешняя валидация формы grego Events/DOM/Window 1 19.03.2012 23:03
Валидация полей формы на JS и сервере alex_89 Events/DOM/Window 9 04.12.2011 00:11
Валидация поля для отправки формы shkarbatov Javascript под браузер 3 25.07.2011 14:07
Валидация формы, проблемы с функциями kolybasov jQuery 7 11.07.2011 13:06
Валидация формы dmsuslov jQuery 4 05.11.2010 16:12