Dynamic Input Styling w/jQuery validation

Uses jQuery validate to validate form input onkeyup and dynamically changes input styling for required, valid, invalid and focus.

by Amy Ruddy

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

<div class='container py-5'>
<div class='mx-auto text-white content'>
  <h1 class='h4'>Dynamic form feedback w/validation</h1>
 <p>Input styling is dynamic based on required, focus, and valid. Includes jQuery validation.</p>
</div>
  <form class='bg-white rounded' id="myForm" onsubmit='return false;'>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Your Name">
  </div>
   <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Username" name="username" minlength="2" required>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password" required name="password" minlength="5">
  </div>
  <div class="form-group">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required name='confirm_password' minlength="5">
  </div>
  <button...

CSS

body {
  background-color: #0084ff !important;
}
.content, form {
  max-width: 425px;
}

form {
  margin: 0 auto;
  padding: 35px 20px;
}

.error {
  color: #dc3545;
}
input:required {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5e/Red_asterisk.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 10px 10px;
  background-origin: content-box;
}

input:required:valid, input:focus:valid {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d1/MW-Icon-CheckMark.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 25px 25px;
  background-origin: content-box;
}

input:focus:invalid {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/No-Symbol.svg/120px-No-Symbol.svg.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px 20px;
  background-origin: content-box;
}