Simple form validation. Object-oriented.

Question

Problem statement: It is necessary for me to write a code, whether which before form sending will check all necessary fields are filled. If not all fields are filled, it is necessary to allocate with their red colour and not to send the form.

Now the code exists in such kind:

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

Function is caused in such a way:

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

Now the code works. But I would like to add "dynamism" in it.

That it is necessary for me: to keep an initial code essentially, to add listening form fields (only necessary for filling).

For example, when the field is allocated by red colour and the user starts it to fill, it should become white.

As a matter of fact I need to add listening of events: onChange, blur for the blank fields of the form. As it to make within the limits of an initial code.

If all my code - full nonsense, let me know about it. As to me it to change using object-oriented the approach.

---

Give me pure javascript solution, please. Jquery - great lib, but it does not approach for me.

Answer 1

To keep your HTML clean, I suggest a slightly different strategy.

1. Use a framework like jQuery which makes a lot of things much more simple.

2. Move all the code into an external script.

3. Use the body.onLoad event to look up all forms and install the checking code.

4. Instead of hardcoding the field values, add a css class to each field that is required:

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

   Note that you can have more than a single class.

When the form is submitted, examine all fields and check that all with the class required are non-empty. If they are empty, add the class error otherwise remove this class. Also consider to add a tooltip which says "Field is required" or, even better, add this text next to the field so the user can see with a single glance what is wrong.

In the CSS stylesheet, you can then define a rule how to display errors.

For the rest of the functionaly, check the jQuery docs about form events.

Answer 2

jQuery adds a lot of benefit for a low overhead. It has a validation plugin which is very popular. There are some alternatives as well but I have found jQuery to be the best.

Benefits

• small download size
• built in cross browser support
• vibrant plug-in community
• improved productivity
• improved user experience

Answer 3

Has made.

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

This code is not pleasant to me, but it works also I could not improve it without rewriting completely.