Signin Form Js | Signin Script Js | Js Login Form | Login Form Js Code | Javascript Signin Example | Js Signup Form | Realtime Form Check | Realtime Form Validation | Check Form In Real Time | Form Validity Check Live | Live Form Check Needed | Form Check Instantly Plz | Real-time Form Verification | Check Form On The Fly | Validate Form Javascript | Form Validation Js | Validate Js Form | Js Form Check | Check Js Form | Validate With Js | Form Js Validation | Html Form Validation | Html Form Check | Form Validation Code | Validate Html Forms | Html Validation Help | Check Form Inputs Html | How Validate Html | Validate Html Form Entries

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

document.getElementById() addEventListener()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Validate</title>
<style>
  body{font-family:system-ui;max-width:400px;margin:40px auto;padding:0 20px}
  .field{margin-bottom:14px}
  label{font-weight:700;display:block;margin-bottom:4px}
  input{width:100%;padding:10px;border:2px solid #cbd5e1;border-radius:8px;font:inherit;box-sizing:border-box}
  input.invalid{border-color:#dc2626}
  input.valid{border-color:#16a34a}
  .err{color:#dc2626;font-size:.82rem;margin-top:3px;min-height:1em}
  button{background:#0ea5e9;color:#fff;border:0;padding:12px 22px;border-radius:8px;font-weight:900;cursor:pointer}
  button[disabled]{opacity:.5;cursor:not-allowed}
</style>
</head><body>
<form id="f">
  <div class="field">
    <label>Email</label>
    <input type="email" id="email" required>
    <div class="err" id="email-err"></div>
  </div>
  <div class="field">
    <label>Password (8+ chars)</label>
    <input type="password" id="pwd" minlength="8" required>
    <div class="err" id="pwd-err"></div>
  </div>
  <button type="submit" id="go" disabled>Sign in</button>
</form>
<script>
const $e = document.getElementById('email');
const $p = document.getElementById('pwd');
const $go = document.getElementById('go');

function check() {
  const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test($e.value);
  const pwdOk   = $p.value.length >= 8;
  $e.className = $e.value ? (emailOk ? 'valid' : 'invalid') : '';
  $p.className = $p.value ? (pwdOk   ? 'valid' : 'invalid') : '';
  document.getElementById('email-err').textContent = $e.value && !emailOk ? 'Looks like a typo' : '';
  document.getElementById('pwd-err').textContent   = $p.value && !pwdOk   ? 'At least 8 characters' : '';
  $go.disabled = !(emailOk && pwdOk);
}
$e.addEventListener('input', check);
$p.addEventListener('input', check);
document.getElementById('f').addEventListener('submit', (ev) => {
  ev.preventDefault();
  alert('Would submit: ' + $e.value);
});
</script></body></html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.