Проверка правильности заполнения формы

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

Вы спросите зачем? … а необходимо это для того, что бы как минимум сократить время заполнения той же формы пользователем а также на стадии отправки данных проверить на корректность заполнения т.к. в случае неверно заполненного поля или же отсутствия данных в нем ему (пользователю) необходимо вернуться на страницу и заполнить все заново.

Данный пример является наиболее простым и проверяет ввел ли пользователь что либо ( никаких проверок на то, что же он ввел нет) или поле пустое и в случае этого “делает” видимым соответствующий блок .

JavasSript:

function blur_error( div_id, input_id )

{

	var obj_len = document.getElementById( input_id ).value.length;

	var obj_error = document.getElementById( div_id );

		if( obj_len == 0 )

			{ obj_error.style.visibility = "visible"; }

		else

			{ obj_error.style.visibility = "hidden"; }

}

Пример формы ввода:

<form method="post" name="" action="">
<input type="text" onblur="blur_error('name_error', this.id)" id="name"/> Ваше имя
<div id="name_error" style="visibility: hidden;">
<font color="red"> Необходимо ввести имя!</font>
</div>

<input type="text" onblur="blur_error('fam_error', this.id)" id="fam"/> Ваша фамилия:
<div id="fam_error" style="visibility: hidden;">
<font color="red"> Необходимо ввести фамилию!</font>
</div>
</form>

Как видно из выше приведенного примеры формы ввода для вставки данного скрипта необходимо в интересующем нас поле ввода (input, textarea) вставить

onblur="blur_error('pole_error', this.id)" id="pole"

Значение pole должно быть уникальным для каждого поля ввода.

И соответственно создаем блок в котором будет выводиться наше предупреждение о не заполнено (изначально скрытое).

<div id="name_error" style="visibility: hidden;"><font color="red"> Необходимо ввести имя!</font></div>

Пример работы данного скрипта:

25-03-08 06:03:00

К этой статье еще нет комментариев.

Написать комментарий

ВНИМАНИЕ: Все поля необходимо заполнить