Проверка заполнения полей формы
Добрый день! Имеется форма и простейший скрипт проверки:
<form onsubmit="return checkForm(this)" action="index.php" method="post">
<div id="contact-form">
<div>
<label for="fio" class="label">Ваше имя</label>
<input type="text" value="" name="fio" id="fio" class="w-460" />
<p id='err_fio' class='error'></p>
</div>
<div>
<label for="phone" class="label">Телефон</label>
<input type="text" value="" name="phone" id="phone" class="w-460" />
</div>
<input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>
<script type="text/javascript">
function checkForm(form){
if (document.getElementById('fio').value=="") {
document.getElementById('err_fio').innerHTML='Введите имя';
return false;
};
return true;
};
</script>
При нажатии кнопки Submit происходит отправка формы без проверки заполнения поля "Ваше имя" с id="fio". Пример скрипта взят с форума. Облазила аналогичные темы, но причину по-прежнему не могу найти. Прошу помочь. |
Цитата:
|
Ок, допустим, что именно при таком раскладе не происходит (к сожалению, не могу уточнить информацию, так как редактирую действующий сайт в данный момент результаты заполнения формы отсылаются на чужой e-mail).
Тогда вопрос следующий: почему не подгружается нужная информация об ошибке в искомый div, а происходит перезагрузка страницы? |
kefalia,
всё подгружается - информация об ошибке в диве ищите неправильные теги, форма в форме, одинаковые id.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<form onsubmit="return checkForm(this)" action="index.php" method="post">
<div id="contact-form">
<div>
<label for="fio" class="label">Ваше имя</label>
<input type="text" value="" name="fio" id="fio" class="w-460" />
<p id='err_fio' class='error'></p>
</div>
<div>
<label for="phone" class="label">Телефон</label>
<input type="text" value="" name="phone" id="phone" class="w-460" />
</div>
<input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>
<script type="text/javascript">
function checkForm(form){
if (document.getElementById('fio').value=="") {
document.getElementById('err_fio').innerHTML='Введите имя';
return false;
};
return true;
};
</script>
</body>
</html>
|
Пересохранила файл еще раз, все заработало. Спасибо!
|
Доброй ночи :)
Пичаль заключается вот еще в чем:
<form onsubmit="return checkForm(this)" action="index.php" method="post">
<div id="contact-form">
<div>
<label for="fio" class="label">Ваше имя</label>
<input type="text" value="" name="fio" id="fio" class="w-460" />
<div id='err_fio' class='error'></div>
</div>
<div>
<label for="phone" class="label">Телефон</label>
<input type="text" value="" name="phone" id="phone" class="w-460" />
<div id='err_phone' class='error'></div>
</div>
<div>
<label for="email" class="label">E-mail</label>
<input type="text" value="" name="email" id="email" placeholder="Введите, чтобы получить копию заказа" class="w-460" />
</div>
<div id='err_email' class='error' style="color: red;"></div>
<input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>
<script type="text/javascript">
function checkForm(form){
if (document.getElementById('email').value==""){
document.getElementById('err_email').innerHTML='Заполните данные о заказчике';
return false;
}
else {
document.getElementById('err_email').innerHTML="";
};
if (document.getElementById('fio').value==""){
document.getElementById('err_fio').innerHTML='Заполните данные о заказчике';
return false;
}
else {
document.getElementById('err_fio').innerHTML="";
};
if (document.getElementById('phone').value==""){
document.getElementById('err_phone').innerHTML='Заполните данные о заказчике';
return false;
}
else {
document.getElementById('err_phone').innerHTML="";
};
return true;
};
</script>
Подозреваю, что я что-то намудрила с условиями. Значение value передается только из поля с id="email", из остальных полей не передается ничего, даже если они заполнены. Причем, если повесить на каждый input событие onblur="alert(this.value)", то во всплывающем окне появляется значение, введенное в поле, а в функцию - не передается. То есть, сначала проверяется email (так было сделано с целью эксперимента), затем проверяется имя и, даже если поле заполнено, при повторном нажатии на submit, остается надпись "Заполните данные о заказчике". |
kefalia,
может опять чего несохранили -- работает всё |
Проблема решилась путем изменения id полей (видимо дублировались id):)
|
kefalia,
неувидел этой ошибки |
Уже все исправила (см. предыдущее сообщение) :) спасибо! :)
|
Работает только в новых браузерах. Выглядит в каждом браузере по-своему.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<form action="index.php" method="post">
<div id="contact-form">
<div>
<label for="fio" class="label">Ваше имя</label>
<input type="text" value="" name="fio" id="fio" class="w-460" required="required" title="Введите имя" />
</div>
<div>
<label for="phone" class="label">Телефон</label>
<input type="text" value="" name="phone" id="phone" class="w-460" />
</div>
<input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>
</body>
</html>
|
Подскажите где ошибка :-?
<input name="tel_1_1" oninput="checkField()" type="text" id="tel_1_1" value="1" style="width:300px;background:#FFEEEE" />
<input name="tel_1_2" oninput="checkField()" type="text" id="tel_1_2" value="2" style="width:300px;background:#FFEEEE" />
<input name="tel_1_3" type="text" id="tel_1_3" value="3" style="width:300px;background:#FFEEEE" />
<script language="javascript">
function checkField () {
if (this.value =="") {
this.style = "background:#FFEEEE";
} else {
this.style = "background:#FFFFFF";
}
}</script>
Задача - менять фон в определенных полях, в зависимости от заполнения или наоборот очищении. т.е. пустое поле будет розовое, а полное с белым фоном |
sanika, читайте документацию
http://learn.javascript.ru/styles-an...#style-csstext Цитата:
|
<input name="tel_1_1" oninput="checkField()" type="text" id="tel_1_1" value="1" style="width:300px;background:#FFEEEE" />
<input name="tel_1_1" oninput="checkField()" type="text" id="tel_1_2" value="2" style="width:300px;background:#FFEEEE" />
<input name="tel_1_1" oninput="checkField()" type="text" id="tel_1_3" value="3" style="width:300px;background:#FFEEEE" />
<script language="javascript">
function checkField () {
if (this.value =="") {
this.style.background = 'red';
} else {
this.style.background = 'white';
}
}</script>
все-равно не работает мне кажется проблем в обращении this.value, но как правильно сделать? |
Цитата:
Цитата:
oninput=checkField(this) писать без кавычек, ибо с кавычками - димедрол. А в функции сделать приемник для this, который и будет референсом на элемент
function checkField(elem) { // this became elem
if(elem.length < 3)
alert('Минимум три символа!!!');
}
|
Или без кавычек димедрол?
Короче проверьте какой димедрол - то не делайте. |
спасибо, все получилось
|
sanika, нужно не стиль менять, а класс. А уже в css файле классам назначить цвета. Это общепризнанная практика.
|
где пишется емеил куда приходит это всё
|
Куда засабмитишь форму туда и придет)
|
просто я в этом мало чё понимаю где это всё пишется
|
|
после нажатия кнопки кидает сюд пишет ошибка 404
|
Добрый вечер, я тоже разбирался в коде при проверки заполнения полей формы, для себя обнаружил парадокс по поводу переменной valid, абсолютно не понимаю связь этой переменной при проверки условии, когда поля формы пустые, т.е. когда записываем valid = true. Помогите разобраться.
<!doctype html>
<html>
<head>
<title>Проверка формы перед отправкой</title>
<meta charset="utf-8">
<style type="text/css">
form div input { border-style: solid; border-color: #999 }
a{background:silver;color:black;border:3px groove silver;text-decoration: none;font-weight:bold}
div.button{margin-top:10px}
</style>
<script type="text/javascript">
var f;
function checkForm(){
var f = document.forms.myForm;
var valid = false;
for(var i = 0; i < f.length; i++){
if(f.elements[i].type = "text"){
if(f.elements[i].value == ""){
f.elements[i].style.borderColor = "red";
valid = true;
}
else{
f.elements[i].style.borderColor = "";
}
}
}
if(valid){
alert("Заполните все поля")
}
else{
f.submit();
}
}
/*
Создайте и опишите функцию checkForm(), которая должна вызываться перед отправкой формы
В функции необходимо проверить, все ли поля заполнены
Если все поля заполнены, то отправить форму
Если хотя бы одно поле не заполнено:
- выдать alert() с предупреждением
- изменить цвет рамки пустого поля на красный
- данные не отправлять!
*/
</script>
</head>
<body>
<h1>Проверка формы перед отправкой</h1>
<form id="myForm" name="myForm" action="">
<fieldset>
<legend>Форма</legend>
<div>
<label for="txt1">Поле 1</label>
<input type="text" name="p1" id="txt1">
</div>
<div>
<label for="txt2">Поле 2</label>
<input type="text" name="p2" id="txt2">
</div>
<div>
<label for="txt3">Поле 3</label>
<input type="text" name="p3" id="txt3">
</div>
<div>
<label for="txt4">Поле 4</label>
<input type="text" name="p4" id="txt4">
</div>
<div>
<label for="txt5">Поле 5</label>
<input type="text" name="p5" id="txt5">
</div>
<div class="button">
<a href="javascript:checkForm()">Передать форму</a>
</div>
</fieldset>
</form>
</body>
</html>
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 04:17. |