OO JS - binding a method to an event

[lwsimon]

In the highlighted line below, 'this' refers to the form object, not the FormValidation Object. How can I bind a method of the FormValidation object to the submit event on the form?

 

function FormValidation(id){
   /***************
    * Constructor *
    ***************/
   //id is an optional variable.
   if (id === undefined) 
       id = 'standardForm';

   //handle excess inputs with limited length
   $('form#' + id + ' input[maxlength]').each(function(){
       $(this).attr('max_chars', $(this).attr('maxlength')).removeAttr('maxlength').keyup(function(){
           if ($(this).val().length > $(this).attr('max_chars')) {
               $(this).addClass('invalid');
           }
           else {
               $(this).removeClass('invalid');
           }
       });
   });

   //run .validate() when form submits
   $('form#' + id).bind('submit', function(event){
       event.preventDefault();
       this.validate();  /////////////// <-------------------------This line isn't working.
   });    

   /**************
    * Properties *
    **************/
   this.inputMasks = {
       'notempty': /./,
       'alpha': /^[a-z]*$/i,
       'numeric': /^[0-9]*$/,
       'alphanumeric': /^[0-9a-z]*$/
   };
   this.maskedFields = [];

   /***********
    * Methods *
    ***********/
   this.addMask = function(id, mask, message) {
       //verify inputs
       if( id === undefined ) return;
       if( mask === undefined ) mask = 'notempty';
       if( message === undefined ) message = null;

       //append to stack
       this.maskedFields.push( 
           { 
               'id': id,
               'mask': mask,
               'message': message
           } 
       );
   }

   this.validate = function() {
       var error = 'Errors were encountered.  Please verify all input is valid.';
       var failedValidation = false;
       for( i = 0 ; i < this.maskedFields.length ; i++ ){

           var value, regex;
           value = $( 'input#' + this.maskedFields[i]['id'] ).val();
           regex = this.inputMasks[ this.maskedFields[i]['mask'] ];


           var failedMask = !regex.test(value);
           if( failedMask ){
               var message = this.maskedFields[i]['message'];
               failedValidation = true;
               if( message !== null ) error = error + "\n" + message;
           }
       }


       if( failedValidation === true ){
           alert(error);
           console.log("Validation failed");
           return false; 
       }

       console.log('Validation passed');
       return false;
   }
}

[lwsimon]

I fixed that issue - here's my solution (maxlength stuff does not yet work in IE)

 

function FormValidation (id){
   /***************
    * Constructor *
    ***************/
   //id is an optional variable.
   if (id === undefined) 
       id = 'standardForm';

   //handle excess inputs with limited length
   $('form#' + id + ' input[maxlength]').each(function(){
       $(this).attr('max_chars', $(this).attr('maxlength')).removeAttr('maxlength').keyup(function(){
           if ($(this).val().length > $(this).attr('max_chars')) {
               $(this).addClass('invalid');
           }
           else {
               $(this).removeClass('invalid');
           }
       });
   });



   //run .validate() when form submits
   var self = this;
   $('form#' + id).submit( function(event) {
       event.preventDefault();
       self.validate()
       return false;
   });

   this.applyTo = function(formID) {
       alert('formID');
   }


   /**************
    * Properties *
    **************/
   this.inputMasks = {
       'notempty': /./,
       'alpha': /^[a-z]+$/i,
       'numeric': /^[0-9]+$/,
       'alphanumeric': /^[0-9a-z]+$/
   };
   this.maskedFields = [];

   /***********
    * Methods *
    ***********/
   this.addMask = function(id, mask, message) {
       //verify inputs
       if( id === undefined ) return;
       if( mask === undefined ) mask = 'notempty';
       if( message === undefined ) message = null;

       //append to stack
       this.maskedFields.push( 
           { 
               'id': id,
               'mask': mask,
               'message': message
           } 
       );
   }

   this.validate = function() {
       var error = 'Errors were encountered.  Please verify all input is valid.';
       var failedValidation = false;
       for( i = 0 ; i < this.maskedFields.length ; i++ ){
           var value, regex;
           value = $( 'input#' + this.maskedFields[i]['id'] ).val();
           regex = this.inputMasks[ this.maskedFields[i]['mask'] ];


           var failedMask = !regex.test(value);
           if( failedMask ){
               var message = this.maskedFields[i]['message'];
               failedValidation = true;
               if( message !== null ) error = error + "\n -- " + message;
           }
       }


       if( failedValidation === true ){
           alert(error);
           return false; 
       }
       alert('passed validation');
       return false;
   }
}