So when that button is clicked (so you add an event listener to the button), you want to select the two inputs:

with the text input, you want to check if the value property is not an empty string.

with the checkbox input, you want to check if the checked property is true.

So youd use document.addEventListener, and document.querySelector (or documentQuerySelectorAll).

Also probably ignore what @clevious said, this is fairly basic stuff that definitely does not need a framework/library (sorry @clevious, but “just learn a complex framework to do this simple thing” isn’t very good advice).

You can hide the button based on the :valid/:invalid state. Very hacky and probably not what you want but i just wanted to show this. Also when you have to check both a text input and a checkbox it gets a little weird.

Manipulating the DOM using jQuery is easier than the thing you are talking about (Plain JS).

I bet it was difficult for him to understand what you are saying (if he has no experience with JS) because doing something that you have no idea of how it works or even know the meaning of the terms used in it (like event listener, DOM, document…) is way difficult than gradually learning the different parts and getting to a point where you will be able to apply what you learned.

Unless you provide him with a clear and straight example: Plain JavaScript, jQuery or React and he’s going to apply it every time without understanding it.

React is a complex frontend UI framework: advising him to “just learn that” is not good advice. jQuery is a lot easier, but it’s still another library to learn - you still need to learn those things (DOM, event listener, etc) you talk about, it doesn’t insulate you from that.

And at the end of the day, what the OP is asking for is basic JS, your advice was:

You just need to use jQuery, React or any other JS library.

No, you don’t

@bestdesign very basically, you can do something like this (this is just a very rough basis, it needs to be fleshed out, but if you can understand how this works):

I absolutely agree. You don’t need a library or a framework to do what he wants. Using jQuery may be a little more convenient, but not by much. And advising him to use React, if he doesn’t know it, is not helpful. Hell if you are going to use a library why not then just use an actual form validation library.

So instead of just learning how to do what was asked for, it becomes how to learn how to do what was asked plus learn another API on top of the browser API, because you then need to know what $ is and what on is.

Knowing how to do it using the base APIs is preferable because everything else is an abstraction on top of that

There is no actual DOM manipulation going on in the code shown unless you count showing an alert box as DOM manipulation. Every web developer should know how to use the Web APIs querySelector/querySelectorAll and addEventListener, the rest is just plain javascript. By manipulation, i mean changing, there is interaction with the DOM going on, but no manipulation.