Простая проверка формы. Добавить "динамики".

[Jurasmi]

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

Сейчас это выглядит так (и это работает):

//проверка формы заказа
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 на необходимые поля формы в рамках этого кода?
Например: если поле подсвечено красным и пользователь начинает его заполнять, то оно должно становится белым.

Если весь код - полная ерунда, то как это сделать лучше (нужен "объектный") вариант?

[x-yuri]

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

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

нужно ООП ради ООП?

и что там за такая хитрая проверка валидности? Почему не

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 сделать методом. А то у тебя твои объекты - не просто объекты формы/поля, а объекты формы/поля в некоторый момент времени

[Jurasmi]

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

//проверка формы заказа
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;
	}
}

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

[x-yuri]

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

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

не переписывая полностью

это бывает полезно