<h1>
	UX research about disabling <br>forms w/ errors 🙏</h1>
<div>
	<form>
		<label id="errMsg">Please add a value</label>
		<input type="text" id="input" value="" placeholder="Enter new note"/>
		<a href="#" id="btn">Add Note</a>
	</form>
</div>
    body {
      display:flex;
      margin:0;
      justify-content: center;
      align-items:center;
      height:100vh;
      font-family: 'Arial'
    }

    label {
      font-size:10px;
      font-weight:900;
      color:red;
      position: absolute;
      margin-top:-12px;
      opacity:0;
    }

    label.err {
      opacity: 1;
      transition: all .3s ease-in-out;
    }

    form {
      padding: 3rem;
      border-radius: 3px;
      display:flex;
      flex-direction: column;
    }

    input {
      border: none;
      background:#eee;
      display:block;
      padding:10px;
      border-radius: 3px;
      margin-bottom:1rem;
    }

    input:focus {
      outline:none;
    }

    input.err {
      -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
      -moz-box-shadow:inset 0px 0px 0px 2px #f00;
      box-shadow:inset 0px 0px 0px 2px #f00;
      transition: all .3s ease-in-out;
    }

    #btn {
      border-radius: 3px;
      display:block;
      padding: .5rem;
      background-color: limegreen;
      color:white;
      text-decoration:none;
      font-size:12px;
      font-weight:700;
    }

    #btn:hover {
      opacity:.7
    }

    #btn.err {
      cursor: not-allowed;
      opacity:.3;
    }
let btn = document.getElementById('btn')
    let input = document.getElementById('input')
    let errMsg = document.getElementById('errMsg')

    btn.addEventListener('mouseenter', validateNote)
    input.addEventListener('focus', enableButton)

    function validateNote() {
      input.value === "" ? disableButton() : enableButton()
    }

    function submitNote() {
      alert(`Yay 🎉 added "${input.value}" to  🗒!`)
    }

    function disableButton() {
      btn.classList.add('err');
      input.classList.add('err');
      errMsg.classList.add('err');

      document.activeElement.blur();
      btn.removeEventListener('click', submitNote, true);
    }

    function enableButton() {
      btn.classList.remove('err');
      input.classList.remove('err');
      errMsg.classList.remove('err');

      btn.addEventListener('click', submitNote, true);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.