Обработка форм на JS (помигать бордером)
Здравствуйте!
Я так понял здесь можно задать свой вопрос по JS? Надеюсь я правильно разместил пост. Если что подправьте. Задача. Нужно обработать значения полей ввода телефона и email и в случае пустых полей или заполненных не правильно - помигать бордером соответствующей ячейки, запрос при этом на сервер не отсылать. Желательно, но не обязательно отключить кнопку Отправить, если нет значений в полях ввода телефона или email. Вопросы. 1.Логика вроде бы написана верно, но не могу найти ошибку. Скрипт не работает. 2.Не получается использовать setInterval 3.Не получается отключить кнопку Отправить. Привожу код. Стили css внутри, скрипт тоже. Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Спасибо. |
Скрипт почему-то порвал всю разметку сайта, точнее вылез аж за размеры экрана. Привожу отдельно в тегах для скрипта.
<script type="text/javascript">
function checkForm() {
var form=document.forms.form,
user_fname=form.elements.user_fname.value.toString(),
user_tel=form.elements.user_tel.value.toString(),
user_email=form.elements.user_email.value.toString(),
message=form.elements.message.value.toString(),
//регулярное выражение для проверки поля ввода номера телефона, должны быть одни цифры
regTel=/\d{6,11}/,
//регулярное выражение для проверки поля ввода e-mail
regEmail=/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/,
//ищем совпадения в введенной строке и регулярным выражением, если удовлетворяет, то значение, если нет - тогда null
tel=user_tel.match(regTel),
email=user_email.match(regEmail);
form.onchange=function () {
//проверка длины вводимого номера
if (user_tel.length > 5 && user_tel.length < 12) {
tel=user_tel.match(regTel);
return submit();
/* вопрос что возвращается при такой записи - return submit();
** return submit(); это метод отправки формы на указанный в action файл обработки на сервере, а что происходит, когда мы используем
** такую запись в функции проверки изменений в форме?
*/
//если значения в поле ввода пусто или не соответствует регулярке
} else if (user_tel=="" || tel=null) {
checkLable(form.elements.user_tel, 2000); //отправляем запрос с параметрами в функцию checkLable
return false;
}
//проверяем значения в поле ввода email. Если не пусто или соответствует регулярке
if (user_email!="" || email!=null) {
email=user_email.match(regEmail);
return submit(); //тот же вопрос см. выше
} else {
checkLable(form.elements.user_email, 2000); //отправляем запрос с параметрами в функцию checkLable
return false;
}
//функция мигалка. Предполагалось использовать setInterval и помигать бордером при неправильных записях в полях ввода телефона и (или) email
//почему-то не работает!!!!
//что не правильно?
function checkLable(label, deley) {
label.style.backgroundColor = '#f00';
var interval=setInterval(function () {label.style.borderColor = '#f00'}, deley);
clearInterval(interval);
};
}
//планировал отключить кнопку отправки если пустые поля ввода телефона и (или) email
//почему-то не работает!
if (user_tel=="" || user_email=="") {
document.forms.form.elements.next.disabled="disabled";
}
}
</script>
|
Александр345,
Вариант ... )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="contact_form">
<form method="post" action="mail.html" id="form" name="form" onsubmit="return check()">
<fieldset>
<h2>Обратная связь</h2>
<p class="text">
<label >Ваше имя:</label>
<input type="text" name="user_fname" value="" id="user_fname" />
</p>
<p class="text">
<label>Телефон:</label>
<input type="text" name="user_tel" value="" id="user_tel" />
</p>
<p class="text">
<label>Email:</label>
<input type="text" name="user_email" value="" id="user_email" />
</p>
<p class="text">
<label>Сообщение</label>
<textarea id="message"></textarea>
</p>
<p class="next">
<input type="submit" id="next" value="Отправить" />
<input type="reset" id="clear" value="Очистить" />
</p>
</fieldset>
</form>
</div>
<script type="text/javascript">
var rules = {
user_fname:[/\S+/],
user_tel:[/\S+/,/\d{6,11}/],
user_email:[/\S+/,/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/],
message:[/\S+/]
};
function check() {
var c = document.forms.form.elements,
a;
for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) {
checkLable(c[a], 5);
return false
}
return true
};
function checkLable(b, a) {
b.style.backgroundColor = a % 2 ? "#f00" : "";
a-- && window.setTimeout(function (c, d) {
return function () {
checkLable(c, d)
}
}(b, a), 300)
};
</script>
</body>
</html>
|
Спасибо - рони, за уделенное время, но от моего скрипта вообще мало что осталось. Это из за его непригодности или вам проще новый написать чем ковырять чужой скрипт? Просто интересуюсь. ))
Дело в том что я обучаюсь на курсах и мне нужно будет его сдавать, т.е. рассказать чего как работает. У меня пока не такие шикарные познания в JS как у вас, так что если честно то есть вещи которые я не понял в вашем скрипте. Но давайте по порядку. Поставили обработчик на форму при нажатии на кнопку отправляем параметры на проверку в функцию check() - это понятно.
var rules = {
42 user_fname:[/\S+/],
43 user_tel:[/\S+/,/\d{6,11}/],
44 user_email:[/\S+/,/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/],
45 message:[/\S+/]
46 };
Это вы создаете объект со свойствами и присвоенными им значениями регулярных выражений, это понятно.
function check() {
48 var c = document.forms.form.elements,
49 a;
50 for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) {
51 checkLable(c[a], 5);
52 return false
53 }
54 return true
55 };
for (a in rules) не совсем понятно, что это за действие такое. Оператор in это оператор для поиска свайства или индекса (в данном случае переменная а) в объекте или индекса в массиве. Так у вас пока нет а в объекте! А дальше or (var b = 0; b < rules[a].length; b++) идет перебор свойств в объекте и уже есть а. Получается что этим for (a in rules) вы заносите пустую переменную а в объект? Дальше вообще не могу понять что здесь проверяется! if (!rules[a][b].test(c[a].value)) Если в свойствах объекта rules нет совпадений с регулярным выражением test(c[a].value) - так? Получается что у объекта rulers два счетчика - а и b? И не ясна запись c[a].value, даже если подставить значение переменной с все равно не понятно document.forms.form.elements[a].value Переменная а это же свойство или объект? Что-то я совсем запутался. Вот этот кусок тоже не понятен
function checkLable(b, a) {
58 b.style.backgroundColor = a % 2 ? "#f00" : "";
59 a-- && window.setTimeout(function (c, d) {
60 return function () {
61 checkLable(c, d)
62 }
63 }(b, a), 300)
64 };
В строке 58 запись а%2 означает деление и в место а у вас 5. Тогда получается при делении 1 и е сли 1 то цвет красный иначе ничего, правильно я понял? Не понятен синтаксис a-- && window.setTimeout Т.е. вместо а - 5 получается 5-- && window.setTimeout Это условие, тогда почему нет оператора или что это такое - запустить функцию 4 раза? А откуда берутся параметры анонимной функции function (c, d) с и d? Если это тоже что и b, a на входе, то почему вложена функция
60 return function () {
61 checkLable(c, d)
62 }
Правда у меня без этого не работала мигалка. Странно что в литературе иполуется просто тайминг SetTimeout, а оказывается еще нагородить туда нужно еще функцию чтоб работала. И последний вопрос. Сейчас вы проверяете все поля на заполнение, а функция мигает только первым пустым полем. Так предусмотренно в коде чтоб так работало или этот код просто пример рабочего скрипта проверки формы? |
Разбор полётов занимает время ...
Воспользуйтесь поиском здесь есть ответы на все ваши вопросы ... for..in замыкания ну и вариант проверки чтоб мигало всё неправильно заполненное
function check() {
var c = document.forms.form.elements,
a,g = true;
for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) {
checkLable(c[a], 5);
g = false
}
return g
};
|
Спасибо! Будем разбираться.
|
Рони, а можно так?
function checkLable(b, a) { b.style.backgroundColor = a % 2 ? "#f00" : ""; a-- && window.setTimeout(function () { checkLable(b, a) }, 300) }; |
2godoom,
А самому проверить? )))
<div id="show">123</div>
<div id="test">123</div>
<script type="text/javascript">
var show = document.getElementById('show');
var test = document.getElementById('test');
function checkLable(b, a) {
b.innerHTML += b.id + ' ' + a +'<br />';
b.style.backgroundColor = a % 2 ? "#f00" : "";
a-- && window.setTimeout( function () { checkLable(b, a) }, 300)
};
checkLable(test, 7)
checkLable(show, 6)
</script>
|
Вот мой рабочий вариант
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><!-- -->
<header>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Форма.</title>
<link href"reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin:0 auto;
width:975px;
font-family:"Trebuchet MS";
}
#test {
border:1px solid #000;
height:20px;
margin:20px auto;
width:100%;
}
#contact_form {
color:#083481;
margin:0 auto;
padding-top:12px;
width:540px;
}
.text {
color:#000;
font:12px Trebushet MS;
}
.text label {
/*border:1px solid #000;*/
float:left;
left:0;
margin-right:15px;
top:0;
text-align:right;
width:90px;
}
.user_input {
background-color:#fff;
border:1px solid #083481;
width:255px;
}
.message {
background-color:#fff;
border:1px solid #083481;
height:115px;
width:400px;
}
.borderAlert {
background-color:#fff;
border:1px solid #f00;
width:255px;
}
.next {
padding: 10px 0 0 105px;
}
#clear {margin-left:8px;}
</style>
<script type="text/javascript">
onload=function () {
var user_tel="", user_email="",
form=document.forms.form,
user_tel=form.elements.user_tel,
//a=user_tel.value,
user_email=form.elements.user_email,
//b=user_email.value,
button=document.getElementById("next"),
regTel=/\d/, //регулярное выражение для проверки поля ввода номера телефона, должны быть одни цифры
regEmail=/^[a-zA-Z0-9]+@+[a-zA-Z0-9]+\.+[a-z]{2,3}/; //регулярное выражение для проверки поля ввода e-mail
button.onclick = function () { //обработчик кнопки отправки submit
if (user_tel.value == "" && user_email.value == "") { //условие пустых полей ввода номера телефона и почтового ящика
checkLable(user_tel);
checkLable(user_email);
return false;
} else { //в ветке иначе 2 варианта
if (user_tel.value != "") { //первый вариант при заполненном поле ввода номера телефона
var a = user_tel.value,
tel=a.search(regTel);
if (tel != -1 && (a.length > 9 && a.length < 12)) { //проверяем правильность и регулярки и длинны номера если одно условие не верно тогда else
return tel;
} else {
checkLable(user_tel);
return false;
}
} else { //второй вариант при заполненном поле ввода почтового ящика
if (user_email.value != 0) {
var b=user_email.value,
email=b.search(regEmail);
if (email != -1) {
return email;
} else {
checkLable(user_email);
return false;
}
}
}
}
};
form.onsubmit=function() { //функция обработчик нажатой кнопки
if (tel != -1 || email != -1 ) {
return true;
}
return false;
};
function checkLable(label) { //функция мигалка.
var k=0;
var interval1=setInterval(function() {
label.setAttribute("class", "borderAlert");
setInterval(function() {
label.setAttribute("class", "user_input");
}, 1300);
k++;
if (k == 5) {
clearInterval(interval1);
}
}, 1000);
}
}
</script>
</header>
<body>
<div id="contact_form">
<form method="post" action="mail.html" id="form">
<fieldset>
<h2>Обратная связь</h2>
<p class="text">
<label>Ваше имя:</label>
<input type="text" name="user_fname" value="" id="user_fname" class="user_input" />
</p>
<p class="text">
<label>Телефон:</label>
<input type="text" name="user_tel" value="" id="user_tel" class="user_input" />
</p>
<p class="text">
<label>Email:</label>
<input type="text" name="user_email" value="" id="user_email" class="user_input" />
</p>
<p class="text">
<label>Сообщение</label>
<textarea id="message" class="message"></textarea>
</p>
<p class="next">
<input type="submit" id="next" value="Отправить" />
<input type="reset" id="clear" value="Очистить" />
</p>
</fieldset>
</form>
</div>
</body>
</html>
|
Александр345,
Достаточно ввести номер телефона fignuy2011 и отправить валидация формы не сработает |
| Часовой пояс GMT +3, время: 23:02. |