JSFiddle - React, Tailwind, and code Playground

input conditional validation

by crchandler7390

HTML

<table>

  <tr>
    ND
    <input type="number" id="nd" value="" required/> ET
    <input type="number" id="et" value="" required/>
  </tr>
  <div></div>
  <tr>
    ID
    <input type="number" id="id" value="" required/> CS
    <input type="number" id="cs" value="" required/>
  </tr>

</table>

<div id="textstuff"></div>

CSS

table {
  border-spacing: 5px;
}

JavaScript

function blr() {
  var nd_v = Number(document.querySelector("#nd").value);
  var et_v = Number(document.querySelector("#et").value);
  var id_v = Number(document.querySelector("#id").value);
  var cs_v = Number(document.querySelector("#cs").value);

  var para = document.querySelector("#textstuff");

  if (et_v * 2 >= nd_v) {
    para.textContent = "ND must be greater than 2 * ET";
  } else if (id_v < (nd_v + 2 * cs_v)) {
    para.textContent = "ID must be greater than ND + 2*CS"
  } else {
    para.textContent = "";
  }
}

document.querySelector("#nd").addEventListener("blur", blr);
document.querySelector("#et").addEventListener("blur", blr);
document.querySelector("#id").addEventListener("blur", blr);
document.querySelector("#cs").addEventListener("blur", blr);