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

< style>

body, table { font: 11px verdana }
div { color: #FF0000 }
INPUT.text { font: 11px verdana; border: 1px solid #A0ADBB }
INPUT.button { height:21px; border:none; font: 10px verdana; color:#fff; margin:0 0 0 0px; background-color: #A0ADBB }

< /style>

Скрипт проверки формы достаточно простой и вам не составит никакого труда в нем разобраться:

< script language=JavaScript>

function checkForm() {

var err = 0;

if (document.getElementById("named").value == '') {

document.getElementById("named").style.border = "1px solid #FF0000";
document.getElementById("named_err").innerHTML = "поле не заполнено";
err = 1;

}

if (document.getElementById("addresses").value.length < 10) {

document.getElementById("addresses").style.border = "1px solid #FF0000";
document.getElementById("addresses_err").innerHTML = "длина поля не может быть меньше 10 символов";
err = 1;

}

var email = document.getElementById('email').value;
emailTest = "^[_.0-9a-z-]+@([0-9a-z][0-9a-z_-]+.)+[a-z]{2,4}$";
var regex = new RegExp(emailTest); 

if (!regex.test(email)) {

document.getElementById("email").style.border = "1px solid #FF0000";
document.getElementById("email_err").innerHTML = "не корректный e-mail";
err = 1;

}

if (err == 0) document.getElementById("form").submit();

}

function setBorder(id) {

document.getElementById(id).style.border = "1px solid #C0C0C0";
document.getElementById(id+"_err").innerHTML = "";

}

< /script>

А этот код самой формы:

< form action="" id="form" method="post">
< table>
< tr>
< td align='right'>ФИО:< /td>
< td>< input type="text" class="text" id="named" name="named" onclick="setBorder('named')">< /td>
< td>< div id="named_err">< /div>< /td>
< /tr>
< tr>
< td>Адрес:< /td>
< td>< input type="text" class="text" id="addresses" name="addresses" onclick="setBorder('addresses')">< /td>
< td>< div id="addresses_err">< /div>< /td>
< /tr>
< tr>
< td>E-mail:< /td>
< td>< input type="text" class="text" id="email" name="email" onclick="setBorder('email')">< /td>
< td>< div id="email_err">< /div>< /td>
< /tr>
< tr>
< td>< /td>
< td align='center'>
< br>
< input type="button" onclick="checkForm()" value="Отправить" class="button">
< /tr>
< /tr>
< /table>
< /form>

Теперь по порядку. Как вы заметили, каждый элемент формы кроме своей подписи и поля ввода, содержит еще и пустой div. Он необходим для вывода сообщений об ошибке, при неправильно введенных данных. Обратите внимание, что отправка формы осуществляется не при помощи кнопки Submit, а с помощью Button, что позволит обработать данные формы и в случае корректности данных, отправить их по назначению.

Главная функция называется checkForm. Данная функция выполняется при нажатии на кнопку "Отправить". Функция проверяет каждое из полей формы:

document.getElementById("named").value == '' - проверка на обязательное поле ввода
document.getElementById("addresses").value.length < 10 - проверка на минимальную длину поля
if (!regex.test(email)) - проверка на корректность введенного E-mail.

В случае, если возникает ошибка, выполняются следующие действия:

document.getElementById("...").style.border = "1px solid #FF0000"

Границы поля выделяются красным цветом. Граница меняет свой цвет на прежний, только после того, как пользователь поместил указатель на данное поле (функция setBorder).

document.getElementById("...").innerHTML = "поле не заполнено"

Соответствующему divу присваивается значение ошибки. Аналогично, ошибка стирается, если пользователь нажал на поле ввода.

err = 1

Переменной err присваивается единица. В конце функции, если ошибки не были обнаружены, выполняется отправка формы:

document.getElementById(id+"_err").innerHTML = ""