JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<form id="loginform" method="PUT" action="#">
<label>Benutzer<br><input type="text" name="muh" required></label>
<label>Kennwort<br><input type="password" name="quack" required pattern="Brokkoli"></label>
<button type="submit" name="login">
Login
</button>
</form>

CSS

label {
   display: block;
   margin-bottom: 0.5em; 
}

JavaScript

const loginform = document.forms.loginform;
const user = loginform.elements.muh;
const pass = loginform.elements.quack;

loginform.addEventListener("input", validateInput);
loginform.elements.login.disabled=true;

function validateInput(changeEvent) {
   const okay = user.checkValidity() && pass.checkValidity();
   loginform.elements.login.disabled = !okay;
}