Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.04.2010, 13:12
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Простая проверка формы. Добавить "динамики".
Необходимо написать простую проверку формы. Если необходимые поля формы не заполнены, то подсвечивать их красным и не отправлять форму.

Сейчас это выглядит так (и это работает):
//проверка формы заказа
function formsubmit(formName, reqFieldArr){		
	var curForm = new formObj(formName, reqFieldArr);
	if(curForm.valid)
		curForm.send();
	else
		curForm.paint();//покраска незаполенных полей	
}


//объект форма
function formObj(formName, reqFieldArr){
	var filledCount = 0;
	var fieldArr = new Array();
	for(i=reqFieldArr.length-1; i>=0; i--){
		fieldArr[i] = new fieldObj(formName, reqFieldArr[i]);
		if(fieldArr[i].filled == true)
		filledCount++;
	}
	
	//валидность
	if(filledCount == fieldArr.length)
		this.valid = true;
	else
		this.valid = false;
	
	
	//покраска незаполенных полей
	this.paint = function(){
		for(i=fieldArr.length-1; i>=0; i--){
			if(fieldArr[i].filled == false)
				fieldArr[i].paintInRed();
			else
				fieldArr[i].unPaintInRed();
		}
	}
	
	//отправка
	this.send = function(){
		document.forms[formName].submit();
	}
}


//объект поле
function fieldObj(formName, fName){
	var curField = document.forms[formName].elements[fName];
	
	if(curField.value != '')
		this.filled = true;
	else
		this.filled = false;
		
	this.paintInRed = function(){
		curField.addClassName('red');
	}
	
	this.unPaintInRed = function(){
		curField.removeClassName('red');
	}
}


Вызывается проверка так:

<input type="button" onClick="formsubmit('orderform', ['name', 'post', 'payer', 'recipient', 'good'])" value="Отправить" />


Задача: как повесть onChange и blur на необходимые поля формы в рамках этого кода?
Например: если поле подсвечено красным и пользователь начинает его заполнять, то оно должно становится белым.

Если весь код - полная ерунда, то как это сделать лучше (нужен "объектный") вариант?
Ответить с цитированием
  #2 (permalink)  
Старый 07.04.2010, 14:59
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

Сообщение от Jurasmi
как это сделать лучше (нужен "объектный") вариант
нужно ООП ради ООП?

и что там за такая хитрая проверка валидности? Почему не
this.valid = true;
for(i=reqFieldArr.length-1; i>=0; i--){ 
    var f = new fieldObj(formName, reqFieldArr[i]); 
    if( ! fieldArr[i].filled ){
        this.valid = false;
        break;
    }
}

да и вообще можно valid сделать методом. А то у тебя твои объекты - не просто объекты формы/поля, а объекты формы/поля в некоторый момент времени

Последний раз редактировалось x-yuri, 07.04.2010 в 15:01.
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2010, 15:34
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Ок, переделал. Замечания не учел.

//проверка формы заказа
function formsubmit(formName, reqFieldArr){		
	var curForm = new formObj(formName, reqFieldArr);
	if(curForm.valid)
		curForm.send();
	else{
		curForm.paint();//покраска незаполенных полей	
		curForm.listen();//прослушивание полей
	}
}


//объект форма
function formObj(formName, reqFieldArr){
	var filledCount = 0;
	var fieldArr = new Array();
	for(i=reqFieldArr.length-1; i>=0; i--){
		fieldArr[i] = new fieldObj(formName, reqFieldArr[i]);
		if(fieldArr[i].filled == true)
		filledCount++;
	}
	
	//валидность
	if(filledCount == fieldArr.length)
		this.valid = true;
	else
		this.valid = false;
	
	
	//покраска незаполенных полей
	this.paint = function(){
		for(i=fieldArr.length-1; i>=0; i--){
			if(fieldArr[i].filled == false)
				fieldArr[i].paintInRed();
			else
				fieldArr[i].unPaintInRed();
		}
	}
	
	//отправка
	this.send = function(){
		document.forms[formName].submit();
	}
	
	//прослушивание полей
	this.listen = function(){
		for(i=fieldArr.length-1; i>=0; i--){
			fieldArr[i].fieldListen();
		}
	}
}


//объект поле
function fieldObj(formName, fName){
	var curField = document.forms[formName].elements[fName];
	
	this.filled = getValueBool();
		
	this.paintInRed = function(){
		curField.addClassName('red');
	}
	
	this.unPaintInRed = function(){
		curField.removeClassName('red');
	}
	
	//прослушивание 
	this.fieldListen = function(){
		curField.onkeyup = function(){
			if(curField.value != ''){ 
				curField.removeClassName('red');
			}
			else{
				curField.addClassName('red');
			}
		}
	}
	
	function getValueBool(){
		if(curField.value != '')
			return true;
		else
			return false;
	}
}


Не нравится мне этот код, но он работает и я не смог его улучшить не переписывая полностью.
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2010, 16:48
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а спрашивал зачем тогда? Еще раз, у тебя ООП ради ООП, писал бы на функциях и людей не смущал

и что прослушивание включается только после попытки отправить форму?

Сообщение от Jurasmi
не переписывая полностью
это бывает полезно
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка и отправка данных из формы Катерина Общие вопросы Javascript 2 25.03.2010 16:56
Проверка полей формы Qwe2Qwe Общие вопросы Javascript 7 27.02.2010 19:43
проверка данных формы Zzet jQuery 3 31.07.2009 22:05
Проверка полей формы Rush Общие вопросы Javascript 2 16.10.2008 23:44
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14