Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2012, 05:11
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

Повторение скрипта покругу - Валидация
Здравствуйте, эта валидация меня убивает, не могу сообразить как закончить скрипт, чтоб при каждом новом клике по инпуту скрипт заного проходил валидацию.

<html>

<head>
</head>

<body>
<div id="name_error"></div><br>
<div id="tel_error"></div><br>
<div id="code_error"></div><br>
<br>
<input type="text" id="name" maxlength="30"><br>
<input type="text" id="tel" maxlength="10"><br>
<input type="text" id="code" maxlength="5"><br>
<br>
<input type="button" value="valiDate" onclick="valiDate();">

<script>
function valiDate() {
var name = document.getElementById('name');
var name_error = document.getElementById('name_error');
var tel = document.getElementById('tel');
var tel_error = document.getElementById('tel_error');
var code = document.getElementById('code');
var code_error = document.getElementById('code_error');
var num = /^[0-9]*$/;
var abc = /^[a-z A-Z]*$/;

if (name.value == ""){
name_error.innerHTML = 'Error name.';
//return;
}
if (abc.exec(name.value) == null) {
name_error.innerHTML = 'Error name.';
//return;
}
if (tel.value == ""){
tel_error.innerHTML = 'Error tel.';
//return;
}
if (num.exec(tel.value) == null) {
tel_error.innerHTML = 'Error tel.';
//return;
}
if (tel.value.length < 10){
tel_error.innerHTML = 'Error tel.';
//return;
}
if (code.value == ""){
code_error.innerHTML = 'Error code.';
//return;
}
if (code.value.length < 5){
code_error.innerHTML = 'Error code.';
//return;
}
return;
alert('ok');
}
</script>
</body>

</html>


Поля не заполняю кликаю на инпут, вылетают три ошибки, заполняю первое поля и кликаю на инпут опять, по задумке скрипт должен повторяться заного и первой ошибки уже быть не должно, а не чего не происходит, помогите плиз, таю уже, не въеду ?
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2012, 09:20
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Всё повторяется, просто первая ошибка была выведена при первом клике, а при втором не стёрта, стереть её можно в секции else.
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2012, 09:21
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

lamer, перед запуском скрипта очищайте поля
name_error.innerHTML = ""; tel_error.innerHTML = ""; code_error.innerHTML = "";

и после return; ваш alert(); в конце не сработает...
Ответить с цитированием
  #4 (permalink)  
Старый 18.07.2012, 14:39
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

Ребят я прошу прощения за наглость, но с этим вариантом голову сломал, не выходит не чего. Пожалуйста если не трудно можно пример кусочка кода ?
Ответить с цитированием
  #5 (permalink)  
Старый 18.07.2012, 14:42
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

<html>

<head>
</head>

<body>
<div id="name_error"></div><br>
<div id="tel_error"></div><br>
<div id="code_error"></div><br>
<br>
<input type="text" id="name" maxlength="30"><br>
<input type="text" id="tel" maxlength="10"><br>
<input type="text" id="code" maxlength="5"><br>
<br>
<input type="button" value="valiDate" onclick="valiDate();">

<script>
function valiDate() {
var name = document.getElementById('name');
var name_error = document.getElementById('name_error');
var tel = document.getElementById('tel');
var tel_error = document.getElementById('tel_error');
var code = document.getElementById('code');
var code_error = document.getElementById('code_error');
name_error.innerHTML = ""; tel_error.innerHTML = ""; code_error.innerHTML = "";
var num = /^[0-9]*$/;
var abc = /^[a-z A-Z]*$/;

if (name.value == ""){
name_error.innerHTML = 'Error name.';
//return;
}
if (abc.exec(name.value) == null) {
name_error.innerHTML = 'Error name.';
//return;
}
if (tel.value == ""){
tel_error.innerHTML = 'Error tel.';
//return;
}
if (num.exec(tel.value) == null) {
tel_error.innerHTML = 'Error tel.';
//return;
}
if (tel.value.length < 10){
tel_error.innerHTML = 'Error tel.';
//return;
}
if (code.value == ""){
code_error.innerHTML = 'Error code.';
//return;
}
if (code.value.length < 5){
code_error.innerHTML = 'Error code.';
//return;
}
//return;
alert('ok');
}
</script>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2012, 14:55
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Ну и раскомментировать все return, кроме последнего (который вообще надо убрать), иначе alert будет всегда выводиться, а не только когда нет ошибок.

Последний раз редактировалось bes, 18.07.2012 в 15:15.
Ответить с цитированием
  #7 (permalink)  
Старый 18.07.2012, 15:16
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

Спасибо ребята за помощь.
Вот так мне нужно было:

<html>

<head>
</head>

<body>
<div id="name_error"></div><br>
<div id="tel_error"></div><br>
<div id="code_error"></div><br>
<br>
<input type="text" id="name" maxlength="30"><br>
<input type="text" id="tel" maxlength="10"><br>
<input type="text" id="code" maxlength="5"><br>
<br>
<input type="button" value="valiDate" onclick="valiDate();">

<script>
function valiDate() {
var name = document.getElementById('name');
var name_error = document.getElementById('name_error');
var tel = document.getElementById('tel');
var tel_error = document.getElementById('tel_error');
var code = document.getElementById('code');
var code_error = document.getElementById('code_error');
name_error.innerHTML = "";
tel_error.innerHTML = "";
code_error.innerHTML = "";
var num = /^[0-9]*$/;
var abc = /^[a-z A-Z]*$/;

if (name.value == ""){
name_error.innerHTML = 'Error name.';
}
if (abc.exec(name.value) == null) {
name_error.innerHTML = 'Error name.';
}
if (tel.value == ""){
tel_error.innerHTML = 'Error tel.';
}
if (num.exec(tel.value) == null) {
tel_error.innerHTML = 'Error tel.';
}
if (tel.value.length < 10){
tel_error.innerHTML = 'Error tel.';
}
if (code.value == ""){
code_error.innerHTML = 'Error code.';
}
if (code.value.length < 5){
code_error.innerHTML = 'Error code.';
}else{
alert('ok');
}
}
</script>
</body>

</html>
Ответить с цитированием
  #8 (permalink)  
Старый 18.07.2012, 15:22
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

ну не совсем так, ok будет выводиться только, если правильно заполнено последнее поле, хотя в других полях могут быть ошибки.
Также предпоследняя проверка поглощается последней (тоже самое c tel: '' поглощается <10)

Последний раз редактировалось bes, 18.07.2012 в 15:26.
Ответить с цитированием
  #9 (permalink)  
Старый 18.07.2012, 15:59
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

<html>
 
<head>
</head>
 
<body>
<div id="error"></div>
<br>
<form id="form">
<input type="text" id="name" maxlength="30"><br>
<input type="text" id="tel" maxlength="10"><br>
<input type="text" id="code" maxlength="5"><br>
</form><br>
<input type="button" value="valiDate" onclick="valiDate();">
 
<script>
var d = document;

function valiDate() {
var error = d.getElementById("error"), form = d.getElementById("form"), j = true;
error.innerHTML = "";
var num = /^[0-9]*$/;
var abc = /^[a-z A-Z]*$/;

for (i=0; i < form.elements.length; i++) {
	switch (form.elements[i].id) {
		case "name": {
			(form.elements[i].value == "" || abc.exec(form.elements[i].value) == null) ? (error.innerHTML += "Error name<br>", j = false) : "";
			break;
		}
		case "tel": {
			(num.exec(form.elements[i].value) == null || (form.elements[i].value.length < 10)) ? (error.innerHTML += "Error tel<br>", j = false) : "";
			break;
		}
		case "code": {
			(form.elements[i].value == "" || form.elements[i].value.length < 5) ? (error.innerHTML += "Error code<br>", j = false) : "";
			break;
		}
	}
}
j == true ? alert("ok") : alert("error");
}
</script>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 18.07.2012, 20:57
Профессор
Отправить личное сообщение для lamer Посмотреть профиль Найти все сообщения от lamer
 
Регистрация: 08.02.2012
Сообщений: 216

lord2kim, спасибо удобная валидация, правда трудно было разобраться =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Найти элемент ниже скрипта Vladislav_V Javascript под браузер 8 12.01.2011 08:47
Оцените реализацию скрипта валидации данных формы pandasensey Ваши сайты и скрипты 0 05.07.2010 18:11
Повторное действие скрипта через определенное время fortitudo jQuery 8 27.01.2010 06:00
Круговорт скрипта.... Karl Общие вопросы Javascript 1 17.10.2009 15:37
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 12:03