form
  .form-group
    label(for="username") Username
    input.form-control(
      name="username",
      id="username",
      pattern="^\\w{6,8}$",
    )
  .form-group
    label(for="password") Password
    input.form-control(
      required,
      name="password",
      type="password",
      placeholder="Password",
    )
  .form-group
    label(for="age") Age
    input.form-control(
      required,
      name="age",
      placeholder="Age",
      pattern="^\\d+$",
    )
    p.alert.alert-danger.error-hint.mt-1 Must be a number
    
  .form-group
    button.btn.btn-primary.btn-block Submit
    
  
View Compiled
body
  background-color gray

form
  margin 2em auto 0
  padding 2em
  width 20rem
  background-color white
  border-radius .5em
  
input:invalid:not(:placeholder-shown)
  background-color lighten(red, 90%)
  border-color var(--red)
  
  + .error-hint
    display block
    
.error-hint
  display none
View Compiled
$('form').on('submit', event => {
  if (this.matches(':invalid')) {
    alert('no');
    event.preventDefault();
  }
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js