javascript form validation object

Question

Please i just started learning javascript, In order to build my skill. I gave myself a javascript project to build an object validator.The first method i created is checkEmpty. This method check for empty field. But for reason unknow to me the method don't work.

This is the html form

    <form name="myForm">

      <input type="text" class="required email" name='fName'/>
      <input type="text" class="required number"  name="lName"/>

       <input type="submit" value="submit" name="submit" id="submit"/>

     </form>

This is the javascript that called the validator object

    window.onload = function(){
 var validate = new FormValidator('myForm');    
 var submit = document.getElementById('submit');

     //this method won't work for internet explorer
 submit.addEventListener('click',function(){return checkLogic();},false);   
 var checkLogic = function(){
    validate.checkEmpty('fName');                   
};  

   }

This is the javascript object called Formvalidation

   function FormValidator(myForm){
  //check ur error in stack overflow;
   this.myForm = document.myForm;   

    this.error = '';

    if(typeof this.myForm === 'undefined'){

      alert('u did not give the form name ');
      return;
     }


    }

//this method will check wheather a field is empty or not

    FormValidator.prototype.checkEmpty = function(oEmpty){  
     var oEmpty =  this.myForm.oEmpty;
     if(oEmpty.value === '' || oEmpty.value.length === 0){
    this.error += "Please Enter a valid Error Message \n";

      }
     FormValidator.printError(this.error);

     };

This method printout the error;

     FormValidator.printError = function(oData){
       alert(oData);
     };

any error on console?

sasi
– sasi

2013-02-28 13:22:59 +00:00
Commented Feb 28, 2013 at 13:22 — sasi
– sasi, Commented Feb 28, 2013 at 13:22

Uwe Günther · Accepted Answer · 2013-02-28 14:58:16Z

After formatting your code it got a lot easier to find out what went wrong. I assume you are trying to validate the input fields from your html code.

Your code is falling on its nose the first time in line 1 of the method checkEmpty():

FormValidator.prototype.checkEmpty = function(oEmpty){
    var oEmpty =  this.myForm.oEmpty;
    if(oEmpty.value === '' || oEmpty.value.length === 0){
        this.error += "Please Enter a valid Error Message \n";

    }
    FormValidator.printError(this.error);
};

In the first line you are hiding the methods argument oEmpty with the var oEmpty statement from line 1

There are several other issues like overusing methods and members. The following code is probably what you wanted:

1.) index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form name="myForm">
        <input id="fName" name='fName' type="text"/>
        <input id="lName" name="lName" type="text"/>
        <input id="submit" name="submit" type="submit" value="submit"/>
    </form>
    <script src="main.js"></script>
</body>
</html>

2.) main.js

function InputFieldValidator(inputFieldName){
    this.inputFieldName = inputFieldName;
    this.inputField = document.getElementById(this.inputFieldName);
    if(this.inputField === 'undefined'){
        alert('No input field: ' + this.inputFieldName);
    }
}

InputFieldValidator.prototype.validate = function(){
    if(this.inputField.value === ''){
        alert('Please enter valid text for input field: ' + this.inputFieldName);
    }
};

window.onload = function(){
    var fNameValidator = new InputFieldValidator('fName'),
        lNameValidator = new InputFieldValidator('lName'),
        submitButton = document.getElementById('submit');

    submitButton.addEventListener('click', function (){
        fNameValidator.validate();
        lNameValidator.validate();
    });
};

If you like you can wrap the input field validators from above easily in a form validator.

Paul T. Rawkeen · Accepted Answer · 2013-02-28 13:23:47Z

0

This is the right way to define functions this way:

var FormValidator = function(myForm){ /* function body */ };
    FormValidator.prototype.checkEmpty = function(oEmpty){ /* function body */ };

Than, after instantiating the object, you can call FormValidator.checkEmpty(value) like you did.

answered Feb 28, 2013 at 13:23

Paul T. Rawkeen

4,1133 gold badges38 silver badges53 bronze badges

Collectives™ on Stack Overflow

javascript form validation object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related