Javascript OO question

Question

So I want to build a form validation class/object in javascript. The way I see it working would be something like this:

var form=new Validation(); 
form.addField("name","Your name","required");
form.addField("email","Email Address","is_email");
.........
form.validate();

I was thinking that the validation class would be defined something like this?

validation
{
  var fields=new Array();
  var labels=new Array();
  var rules=new Array();
  var count=0;

  function addField(field,label,rule)
  {
    this.fields[count]=field;
    this.labels[count]=label;
    this.rules[count]=rule;
    this.count=count+1;
  }

  function validate()
  {
    var valid;
    for (x=0; x< count; x++)
    {
      valid=false;
      switch (this.rules[x])
      {
         case 'required':
           valid=this.validate_required(this.fields[x]);
           break;

         case 'email':
           valid=this.validate_email(this.fields[x]);
           break;
       }

       if (! valid)
         this.addError(this.fields[x],this.rules[x],this.labels[x]);
     }

     if (this.hasErrors())
       return false;  
     else
       return true;
   }

..........
}

I'm aware that this probably isn't possible as it is right now. My question is, what can I do to so the first block of code (which creates a new instance of Validation and adds the rules to it) would work?

Thanks in advance.

Answer 1

You're just missing some OO notation. Lines marked with a "// ***" comment are the ones I changed from your original code sample:

function Validation() // ***
{
  var fields=new Array();
  var labels=new Array();
  var rules=new Array();
  var count=0;

  this.addField = function (field,label,rule) // ***
  {
    fields[count]=field; // ***
    labels[count]=label; // ***
    rules[count]=rule;   // ***
    count=count+1;
  }

  this.validate = function () // ***
  {
    var valid;
    for (x=0; x< count; x++)
    {
      valid=false;
      switch (rules[x]) // ***
      {
         case 'required':
           valid=this.validate_required(fields[x]); // ***
           break;

         case 'email':
           valid=this.validate_email(fields[x]); // ***
           break;
       }

       if (! valid)
         this.addError(fields[x],rules[x],labels[x]); // ***
     }

     if (this.hasErrors())
       return false;  
     else
       return true;
   }
}

Oh and I didn't see validate_required(), validate_email(), addError() nor hasErrors(). Might wanna add those.

Answer 2

Javascript is Prototype-based programming language.So there is no true way to have classes. The way create classes (or simulate it) is by using function that have state and more functions inside it encompassing behavior.

To solve your question,you can create the Validation Class by using a global level function and instantiate it with new keyword for each form you have.

So actually you just need to make your class definition a function.(Convention:Capital V is just used as notation to designate that this function is a class)

function Validation()
{
  var fields=new Array();
  var rules=new Array();
  var labels=new Array();
  var errors=new Array();
  var count=0;



  function addError(field,rule,label){
    //add error in errors array
  }

  function validate_required(field){
    //do required validation 
  }

  function validate_email(field){
    //do email validation
  }

  return function(){

      addField = function(f,r,l){
        this.fields[count]=f;
        this.rules[count]=r;
        this.labels[count]=l;
        this.count=count+1;
      }

      validate = function ()
      {
        var valid;
        for (x=0; x< count; x++)
        {
          valid=false;
          switch (this.rules[x])
          {
             case 'required':
               valid=validate_required(this.fields[x]);// create private function
               break;

             case 'email':
               valid=validate_email(this.fields[x]);// create private function
               break;
           }

           if (! valid)
             addError(this.fields[x],this.rules[x],this.labels[x]);
         }

         if (this.hasErrors())
           return false;  
         else
           return true;
       }
   }
}

To understand more about JavaScript and its features (and nuisances) , you can go through Douglas Crockford's home page .it has many easy to follow through JavaScript references especially related to Prototype and inheritance .