Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проверка заполнения элементов формы (https://javascript.ru/forum/dom-window/37093-proverka-zapolneniya-ehlementov-formy.html)

Olegans 07.04.2013 21:11

Проверка заполнения элементов формы
 
Добрый день!
Есть некая html страница с формой заявки:
...
<body>
<form action='sendmail.php' method='post' name='request'  onSubmit='return checkedForm(this)'>
...
</form>
<div id='over' class='hide'>
</div>
<div id='overup' class='hide'>
</div>
</body>
...


Собственно, заявка сделана и прекрасно функционирует на html/php, сервер проверяет заполненность обязательных полей, регулярные выражения и т.д и т.п.

Теперь необходимо написать скрипт, который будет делать то же самое, но "на лету", ну и плюс еще всякие вкусности, типа автоматического вывода информации на страницу в зависимости от отмеченных чекбоксов и т.п.

Пока что я остановился на проверке заполнения полей. Вот, что есть:

function checkedForm(form){
var form = document.request;
var over = document.getElementById("over");
var overup = document.getElementById("overup");

var err = [];
var i = 0;
if((form.inn.value.length < 10) || (form.inn.value.length == 11)){
i+=1;
var focusto = "inn";
err.push ("В поле <b>ИНН</b> должно быть 10 или 12 символов!<br>");
}

if((form.inn.value.length == 10) && (form.kpp.value.length < 9)){
i+=1;
if (i == 1) {var focusto = "kpp";}
err.push ("В поле <b>КПП</b> должно быть 9 символов!<br>");
}
...
//дальше проверяем, есть ли ошибки
if (err.length > 0){
var str = "";
for (i = 0; i < err.length; i++) {
	str += "<p>" + err[i] + "</p><br><br>";
}
str += "<p>Уважаемый абонент, пожалуйста, заполните все обязательные поля.<br><br>Если у Вас возникли вопросы по заполнению, Вы можете обратиться по телефонам, указанным в верхней части страницы.<br><br><a href='#' onclick='[B]вот здесь что-то должно быть[/B];return false'>Продолжить</a>";
over.className = "";
overup.className = "";
overup.innerHTML = str;
return false;
}

return true;
}


Что нужно:
Необходимо, чтобы при нажатии на ссылку "Продолжить" менялся класс у объектов с id over и overup обратно на 'hide', а затем окно пролистывалось до объекта с id из переменной 'focusto'.

Собственно, если в свойства ссылки "продолжить" прописать onclick='checkedForm();return false', а в самой функции (checkedForm()) добавить внизу, перед проверкой массива с ошибками блок:

if(over.className == "") {
	over.className = "hide";
	overup.className = "hide";
	location.hash = focusto;
	return;
}


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

В общем, вопрос, как правильно сделать, чтобы:
1) после проверки длины массива с ошибками его содержимое, если таковое есть, передавалось в div с id 'overup'
2) в вышеуказанном блоке была ссылка, при нажатии на которую менялся класс у блоков с id 'over' и 'overup'
3) и затем страница пролистывалась до объекта, id которого в переменной 'focusto'.

Сразу оговорюсь, что всё, что мне необходимо, я реализовал, когда использовал стандартный метод вывода, например, alert. Но хочется обойтись без него.


Часовой пояс GMT +3, время: 14:04.