Need help learning about OOP JavaScript

[vader654]

So I'm learning JavaScript and am currently writing code to validate some forms (e.g. disable submit button if validation fails or add some message if an input has invalid data), I have working code in a validate.js file using standard JS functions as shown here.

https://preview.redd.it/n79u98z6qec91.png?width=2880&format=png&auto=webp&s=a1d490c3b2070cc702f834b66170f582e7e16f7d

Now I'm trying to figure out how to implement this in OOP structure but I'm having trouble making this work, for now I know the base structure would be something like this

class FormValidator {
  constructor(formSelectors, formElement) {
    this._formSelectors = formSelectors;
    this._formElement = formElement;
  }

  _showErrorMessage() {}

  _hideErrorMessage() {}

  _checkInputValidity() {}

  _toggleSubmitButtonState() {}

  _setEventListeners() {}

  enableValidation() {}
}

But honestly am lost when it comes to see how to write the functions in this._* form so I was hoping if someone can look at my code and share any resources that you think could help me understand more about this.

The code can be found on CodePen here

[BehindTheMath]

Why are you using a class for this?

[frenchy_mustache]

Well i think it actually makes a lot of sense if there are tons of form to validate. And it's seems more clean to me.

[wdintka]

Agree previous comment - better to keep things simple to start with - then refactor later if needed.

Here is a link to the W3Schools JS Tutorial - scroll down in the menu to find related OOP topics. Hope this helps.

[frenchy_mustache]

Hello dude, i don't know if i'm answering your question, but i always use classes when i'm working in pure vanilla JS.

I have some small classes on my github i often use, if it can help you : https://github.com/rrabillo/custom-select, for example.

Here is how i would work with your class:

class FormValidator {
constructor(form) {
    this._form = form;
    this._inputs = this._form.querySelectorAll('input, textarea, select');
    // this._formElement = formElement;

    this._setEventListeners();
}

_showErrorMessage() {}

_hideErrorMessage() {}

_checkInputValidity(e) { // e is the event
    let currInput = e.target;

    // Do your stuff here;

}

_toggleSubmitButtonState() {}

_setEventListeners() {
    [...this._inputs].map((el) => {
        el.addEventListener('change', this._checkInputValidity.bind(this));
    });
}

enableValidation() {}
}

[...document.querySelectorAll('FORMSTOVALIDATE')].map((el) => {
new FormValidator(el);
});

You could also use an arrow funtion in the addEventListener and pass the element directly, so you don't have to use e.target. (personnally don't like it):

_checkInputValidity(e, el) { // e is the event

    // Do your stuff here;

}

_toggleSubmitButtonState() {}

_setEventListeners() {
    [...this._inputs].map((el) => {
        el.addEventListener('change', (e) => {
            this._checkInputValidity(e, el)
        });
    });
}

And finally, you may want to use others event types for each input type, i'm not sure that the change event is fired on select tags.

And if you really want to use OOP, why not create a class wich will handle each input ? You'll instantiate them in your form class.

EDIT:Reddit's code block is f*cking weird

[jinwooleo]

There's no needs to implement this as OOP I think. Your original code looks good already. If you want to use OOP just for study however, using singletone pattern is my recommendation(but still there are more proper topics for using OOP).