-1

I got a little problem that I can't solve...

I usually check my form like this:

function checkFirst(field) {
  if (field.value.length < 2 || !regLetters.test(field.value)) {
   //do something
  } else {
   //do something else
    firstNameOk = true;
  }
}

and on the HTML side with onblur="checkFirst(this)".

Now I'm using OOP and I can't use my methods in onblur and I don't know how I could call the class in the onblur HTML attribute...

I already got a solution to work around this without using onblur in HTML and in my case I'd like to know if it's possible or not.

Anyone to help me please?

Edit:to avoid people telling me to use addEventlistener i show you my solution that works fine but not the one i wanted to use...

 this.data.forEach(item => item.addEventListener('blur', function () {
      console.log(item.id)
        // check first name field // 
      if (item.id === "first") {
        if (item.value.length < 2 || !this.regLetters.test(item.value)) { // if this field length =
          this.highlightField(item, true);
        } else {
          this.highlightField(item, false);
          this.errorMessagesReset(item);
          this.firstNameOk = true;
        }
          // check last name field // 
      } else if (item.id === "last") {
        if (item.value.length < 2 || !this.regLetters.test(item.value)) {
          this.highlightField(item, true);
        } else {
          this.highlightField(item, false);
          this.errorMessagesReset(item);
          this.lastNameOk = true;
        }
          // check email field // 
      } else if (item.id === "email") {
        if (item.value.length < 2 || !this.regmail.test(item.value)) {
          this.highlightField(item, true);
        } else {
          this.highlightField(item, false);
          this.errorMessagesReset(item);
          this.emailOk = true;
        }
          // check textarea field // 
      } else if (item.id === "message") {
        if (item.value.length < 1 || item.value > 100) { // if length of item is sup or equal to 1 and 
          this.highlightField(item, true);
        } else {
          this.highlightField(item, false);
          this.errorMessagesReset(item);
          this.messageOk = true;
        }
      }
    }.bind(this))); ```
lowriider74
  • 1
  • 1
  • make a listener, that ist cleaner. In the listener u can easily create objects or call static methods of the class – Bamba675 Aug 28 '21 at 18:40
  • Use `addEventListener` instead. – Heretic Monkey Aug 28 '21 at 18:53
  • Does this answer your question? [Add event handler to HTML element using javascript](https://stackoverflow.com/questions/9800310/add-event-handler-to-html-element-using-javascript) – Heretic Monkey Aug 28 '21 at 18:54
  • tahnks for answering guys, i know i should use addEventListener... that's my solution I was just wondering if it's possible to do something like ( just an exemple) – lowriider74 Aug 28 '21 at 19:01

1 Answers1

0

It should be a static function that belongs to the class then. That way you can call it directly.

Abdulrahim Iliasu
  • 65
  • 8
  • thanks dude but i have no idea how to use it :/ i checked static function doc but i don't understand how to proceed in my case :/ – lowriider74 Aug 28 '21 at 20:38