JavaScript class that generates HTML form with validation

Question

I'm trying to create a complex application—Table generator. And the first part if it is form that lets user input data source. As I figure source should be an absolute http url, so I have to give user <input> with validation, and <button> which will reflect validation state.

Eventually I came up with this:

class Form {
 constructor () {
 this.button = document.createElement('button')
 this.button.innerHTML = 'Upload'
 // Initially it's empty so it's invalid
 this.button.disabled = true
 this.input = document.createElement('input')
 this.input.placeholder = 'Path to data'
 // Let's assign our custom validator
 // since validation props are read only
 this.input.oninput = () => this.validate()
 }
 validate () {
 // Tribute @LukeP
 // https://stackoverflow.com/a/34695026/2626747
 // Let's use anchor superpowers
 // rather then google `url regex`
 const a = document.createElement('a')
 a.href = this.input.value
 // If typed value couldn't be parsed as an absolute url,
 // it'd be considerd as a path on current host
 this.button.disabled = !(a.host && a.host != window.location.host)
 }
 render () {
 const form = document.createElement('form')
 form.appendChild(this.input)
 form.appendChild(this.button)
 return form
 }
}
const form = new Form()
document.getElementById('app').appendChild(form.render())

I'm not satisfied with this code, and I can not explain why. I don't have somewhat strong experience in JS, so I'm relying on your peer review.

Help me make Web better, starting with my app.

Answer 1

I'd just move the render part to the constructor and provide it with the id of the parent element.

class Form {
 constructor( id ) {
 const button = document.createElement('button');
 button.value = "Upload";
 button.disabled = true;
 const input = document.createElement('input');
 input.placeholder = 'Path to data';
 input.oninput = () => this.validate();
 this.input = input;
 this.button = button;
 const form = document.createElement('form');
 form.appendChild(input);
 form.appendChild(button);
 document.getElementById(id).appendChild(form);
 }
 validate () {
 const a = document.createElement('a');
 a.href = this.input.value;
 this.button.disabled = !(a.host && a.host != window.location.host);
 }
}
const form = new Form("app");

It depends what you want to do with the form afterwards.

• askhat: Quite sensible, thank you. About afterwards, I added input getter, to be able to use it in another class constructor like so github.com/askhat/table_generator/blob/master/src/index.js