Давайте создадим простую проверку формы используя библиотеку о jQuery. Сначала создаем саму форму:
<form method="post" action="send.php" onsubmit="check_form(); return false;">
Этот тег открывает нашу форму send.php - файл обработчик формы конструкция onsubmit="check_form(); запустит функцию которая будет проверять форму. Дальше идет сама форма под каждым полем ввода спрятан пустой див в который мы будем писать грозное предупреждение если эти пользователи вздумают шалить.
<table width="500px" align="center" >
<tr>
<td width="30%" align="right"><strong>Ваше имя <font color="red">*</font></strong></td>
<td width="70%" align="left"> <input type="text" name="name" style="width: 260px;" id="name"/>
<div id="error_name" style="clear:both; color:red; 10px;font-size:10px;height:10px;width:220px;text-align: right;"> </div>
</td>
</tr>
<tr>
<td width="30%" align="right"><strong>Ваш E-mail <font color="red">*</font></strong></td>
<td width="70%" align="left"> <input type="text" name="email" style="width: 260px;" id="mail"/>
<div id="error_mail" style="clear:both;line-height: 10px;font-size:10px;color:red; height:10px;width:220px;text-align: right;"> </div>
</td>
</tr>
<tr>
<td width="30%" align="right"><strong>Тема сообщения <font color="red">*</font></strong></td>
<td width="70%" align="left"> <input type="text" name="sub" style="width: 260px;" id="sub"/>
<div id="error_sub" style="clear:both;line-height: 10px;font-size:10px;height:10px;width:220px;text-align: right;"> </div>
</td>
</tr>
<tr>
<td align="right" valign="top"><strong>Cообщениe <font color="red">*</font></strong></td>
<td><textarea name="text" cols="30" rows="7" id="text"></textarea>
<div id="error_text" style="clear:both;line-height: 10px;font-size:10px;height:10px;width:220px;text-align: right;"> </div>
</td>
</tr>
<tr>
<td width="30%"></td>
<td width="70%" align="left"><input type="submit" value="ОТПРАВИТЬ"/></td>
</tr>
</table>
</form>
Теперь давайте создадим функцию check_form() и поместим её код перед формой или после.
<script type="text/javascript">
function check_form()
{
var name = document.getElementById('name'); //получаем ссылку на поле с именем
var mail = document.getElementById('mail'); // получаем ссылку на поле с почтой
var sub = document.getElementById('sub'); // Получаем ссылку на поле стемойсообщения
var text = document.getElementById('text'); // получаем ссылку на сообщение
if ((name.value == "") ||(mail.value == "") || (sub.value == "")|| (text.value == "")) // если хоть одно поле не заполнено
{
if(name.value == "") //если значение поля имя равно пустоте
{
name.style['background'] = "#FFDFDF"; //делаем поле розовым
jQuery("#error_name").html('');//убираем прошлые сообщения об ошибках
jQuery("#error_name").html("Поле не заполнено");// в див под полем записываем предупреждение
}
else // это важно для повторной проверки если пользователь исправил ошибку
{
name.style['background'] = "#FFFFFF"; // Убираем розовый фон
jQuery("#error_name").html(""); //Убираем предупреждение
}
// Точно также поступаем с полем почты
if(mail.value == "")
{
mail.style['background'] = "#FFDFDF";
var error_2 = document.getElementById("error_pass");
jQuery("#error_mail").html("");
jQuery("#error_mail").html("Поле не заполнено");
}
else
{
mail.style['background'] = "#FFFFFF";
jQuery("#error_mail").html("");
}
// Тоже проделываем с полем темы
if(sub.value == "")
{
sub.style['background'] = "#FFDFDF";
jQuery("#error_sub").html("");
jQuery("#error_sub").css("color","red").html("Поле не заполнено");
}
else
{
jQuery("#error_sub").html("");
sub.style['background'] = "#FFFFFF";
}
// и с полем текста
if(text.value == "")
{
text.style['background'] = "#FFDFDF";
jQuery("#error_text").html("");
jQuery("#error_text").css("color","red").html("Поле не заполнено");
}
else
{
jQuery("#error_text").html("");
text.style['background'] = "#FFFFFF";
}
return false; // Если была хоть одна ошибка форма не уходит
}
else { document.form[0].submit();} // Если все поля заполнены отправляем форму
</script>