A simple form of verification. Object oriented

Question

Problem: I need to write a code that will be checked before the form is submitted, all the necessary fields are filled out. If not all the fields are filled, it is necessary to highlight their red color and not send the form.

Now the code exists in this form:

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');
    }
}

The function is called this way:

<input type="button" onClick="formsubmit('orderform', ['name', 'post', 'payer', 'recipient', 'good'])"  value="send" />

Now the code is working. But I would like to add < dynamism to it .

What I need: save the source code essentially, add fields to the listening form (necessary only for filling).

For example, when a field is highlighted in red and the user begins to fill it, it should become white.

Actually I need to add event listener: onChange, blur for empty form fields. How to do this as part of the source code.

- , . - .

---

javascript , . JQuery - , .

Answer 1

.

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;
    }
}

, , , .

Answer 2

HTML , .

• jQuery, .

• script.

• body.onLoad, .

• css :

  <input type="text" ... class="textField required" ...>
  

  , .

, , required . , error, . , , " " , , , , .

CSS , .

jQuery docs .

Answer 3

jQuery . , . , jQuery .

• built-in cross browser support.
• active plugin community
• improved performance
• improved user interface.