0

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

2 回答 2

1

格式化代码后，找出问题所在就容易多了。我假设您正在尝试验证 html 代码中的输入字段。

您的代码第一次出现在方法 checkEmpty() 的第 1 行：

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

在第一行中，您使用第 1 行的 var oEmpty 语句隐藏方法参数 oEmpty

还有其他几个问题，例如过度使用方法和成员。以下代码可能是您想要的：

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

如果您愿意，可以轻松地将上面的输入字段验证器包装在表单验证器中。

于 2013-02-28T14:58:16.920 回答
0

这是以这种方式定义函数的正确方法：

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

然后，在实例化对象之后，您可以FormValidator.checkEmpty(value)像以前一样调用。

于 2013-02-28T13:23:47.820 回答