CodePen

HTML

            
              <form action"#">
  <input type="text" name="First Name">
  
  <input type="text" name="Last Name">
 
  <button>Click Me</button>
  
  <div class="errorMessage"></div>
</form>
            
          
!
via HTML Inspector

CSS

            
              .errorMessage{
  background-color: lightBlue;
  display: none;
}

.errorInput{
  background-color: #f4bfbf;
  border: 1px solid #d03e3e;
}
.errorInput::-webkit-input-placeholder{
  color: #d03e3e;
}

.hide{
  display: none; 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("form").on("submit", function(e){
  $("li").remove();
  
  var errorMessage  = $(".errorMessage");
  var hasError = false;
  
  $("input").each(function(){
    var $this = $(this);
    
    if($this.val() === ""){
      var formName      = $this.attr("name");
      var li            = $("<li></li>",{
        text: "There was an error with " + formName,
        class: "errorText",
      });
      
      hasError = true;
      $this.addClass("errorInput");
      errorMessage.append(li);
      e.preventDefault();
    } if($this.val() != ""){
      $this.removeClass("errorInput"); 
    } else{
      return true; 
    }
  }); //Input
  
  errorMessage.slideDown(1500);
}); //Form .submit
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................