Javascript: checking forms for validations

Question

I am playing with the form validation using javascript. so when ever i use (this) keyword in prototype method (Validator) the console is giving me an error that is in this picture Error from chrome. so help me

function Validation(id, event, target, regex) {
    this.id = id;
    this.event = event;
    this.target = target;
    this.regex = regex;
}

Validation.prototype.Validator = function() {
    var result = this.regex.exec(this.target.value);
    if(result && this.target != null) {
        alert("you did it");
    }
    else {
        alert('no you didn\'t');
    }
};
    
var object1 = new Validation(document.getElementById('btn'), eventer, document.getElementById('box'), /\w/);

var eventer = object1.id.addEventListener("click", object1.Validator);

var object2 = new Validation(document.getElementById('btn'),
                            eventer2,document.getElementById('passbox'), /\d/);

var eventer2 = object2.id.addEventListener("click", object2.Validator);

<style>
        .label {
            display: inline-block;
            margin-top: 5px;
        }
        #box {
            margin-left: 5px;
        }
        #passbox {
            margin-left: 8px;
        }
      
    </style>

<!doctype html>
    <html>
    <head>
    <title>playing with forms</title>
    </head>
    <body>
       <div>
        <div><span class="label">Username: </span><input type="text" id="box">
         </div>
        <div><span class="label">Password: </span><input type="text"               
       id="passbox"></div>
     </div>
     <input type="submit" id="btn" value="clickme"/>

    </body>
    </html>

Why building up your own validation script? What about HTML5 Constraint Validation? It will surely do, what you 're trying to code here. — Marcel, Dec 23 '15 at 08:29
Yes but i need learn how to do it in my own script i want to be javascript developer. and thanks for that suggestion — Yya09, Dec 23 '15 at 08:31

score 0 · Accepted Answer · answered Dec 23 '15 at 08:36

0

When you pass the validation function as an event handler and it gets called, the this object is set to the element, not to the validator object. This results in the this.regex property being undefined and causing a failed match.

Therefore, you need to make sure the this object is bound to the validator instead, and you can do that using:

var eventer = object1.id.addEventListener("click", object1.Validator.bind(object1));

answered Dec 23 '15 at 08:36

bcc32

328
1
7
17

it didn't work i tried it gives me an error (this.regex.match isnot a function) – Yya09 Dec 23 '15 at 08:43
@Yya09 there is no `match` method on a [RegExp](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp) – Hacketo Dec 23 '15 at 08:44
Are you using this.regex.exec or this.regex.match? Regexp class does not have a match function, but has an exec function. Are you thinking of String.prototype.match perhaps? – bcc32 Dec 23 '15 at 08:45
You sure? It seems to work fine for me: https://jsfiddle.net/2rg7j3bo/ – bcc32 Dec 23 '15 at 08:49
yeah it now work thanks – Yya09 Dec 23 '15 at 08:50

score 0 · Answer 2 · answered Dec 23 '15 at 08:38

Issue is Validator function is assigned as a click event to a DOM element, so when you say this, it will represent this DOM element and not your object. You will have to use bind() function to change the context of the function.

Following is the code:

function Validation(id, event, target, regex) {
    this.id = id;
    this.event = event;
    this.target = target;
    this.regex = regex;
}

Validation.prototype.Validator = function() {
  console.log(this);
    var result = this.regex.exec(this.target.value);
    if(result && this.target != null) {
        alert("you did it");
    }
    else {
        alert('no you didn\'t');
    }
};
    
var object1 = new Validation(document.getElementById('btn'), eventer, document.getElementById('box'), /\w/);

var eventer = object1.id.addEventListener("click",object1.Validator.bind(object1));

var object2 = new Validation(document.getElementById('btn'),
                            eventer2,document.getElementById('passbox'), /\d/);

var eventer2 = object2.id.addEventListener("click", object2.Validatorbind(object2));

.label {
  display: inline-block;
  margin-top: 5px;
}
#box {
  margin-left: 5px;
}
#passbox {
  margin-left: 8px;
}

<!doctype html>
<html>

<head>
  <title>playing with forms</title>
</head>

<body>
  <div>
    <div><span class="label">Username: </span>
      <input type="text" id="box">
    </div>
    <div><span class="label">Password: </span>
      <input type="text" id="passbox">
    </div>
  </div>
  <input type="submit" id="btn" value="clickme" />

</body>

</html>

Javascript: checking forms for validations

2 Answers2