CodePen

HTML

            
              <form action"#">
  <input type="text" name="Name">
  
  <input type="text" name="Address 1">
  
  <input type="text" name="Address 2">
  
  <input type="text" name="City">
  
  <input type="text" name="State">
  
  <input type="text" name="Phone">
  
  <input type="text" name="Email">
 
  <button>Click Me</button>
  
  <div class="errorMessage"></div>
</form>
            
          
!
via HTML Inspector

CSS

            
              .errorMessage{
  background-color: lightBlue;
  height: 100%;
}

.errorInput{
  background-color: #f4bfbf;
  border: 1px solid #d03e3e;
}
.errorInput::-webkit-input-placeholder{
  color: #d03e3e;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("form").on("submit", function(e){
  $("input").each(function(){

    var $this = $(this);

    if($($this).val() == ""){
      
      var name = $($this).attr("name");
      var li   = $("<li></li>", {
        text: "There was an error with " + name,
        class: "errorText",
       });
      
      $($this).addClass("errorInput");
      $(".errorMessage").append(li);
      e.preventDefault();
    }else if($($this).val() != ""){
      $($this).removeClass("errorInput");
    }else{
      return true; 
    }
  });
});




/**
$("form").on("submit", function(e){
  $("input").each(function(){
    if($(this).val() == ""){
      
      var name = $(this).attr("name");
      var li   = $("<li></li>");
      
      li.text("There was an error with " + name)
      $(".errorMessage").append(li);
      e.preventDefault();
    }else{
      return true; 
    }
  });
});





$("form").on("submit", function(e){
  $(".errorMessage").empty();
  $("input").each(function(){
    
    var name = $(this).attr("name");
    
    if($(this).val() == ""){
      
      var li = $(document.createElement("li"));
      
      li.text("There was an error with the " + name + " field.");
      
      $(".errorMessage").append(li);
      $("#errorMessageHeader").text("Please correct the following errors:");
            
      e.preventDefault();
    }else{
      return true; 
    }
  });
});



$("form").on("submit", function(e){
  $("input").each(function(){
    
    var name = $(this).attr("name");
    
    if($(this).val() == ""){
      $(".errorMessage").html("There was an error" + " " + name);
      e.preventDefault();
    }else{
      return true; 
    }
  });
});
**/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................