title: Not able to highlight the input fields if left empty
body: <p>I have a form which gets submitted normally, now I have 2 requirement that needs to be completed on click of submit button, if these requirements are completed then the data needs to get saved in database</p>
  
  <blockquote>
    <p>1) Border of the input  boxes get highlighted if input  boxes are left empty</p>
    
    <p>2) If the image upload is left empty, a written message below the upload button should appear saying that the image is missing</p>
    
    <p>3) The form should not get submitted till all input boxes and image upload are filled</p>
    
    <p>4) Would also appreciate if someone could tell how I can use this code for all input boxes together instead of using separately for each one</p>
  </blockquote>
  
  <p>Currently when I click on submit button, if the box is empty it highlights the input but after that submits the form also and the image message is also not appearing  </p>
  
  <p>Form Code</p>
  
  <pre><code>&lt;form action="&lt;?php echo base_url(); ?&gt;profile/add_profile" method="post" &gt;
      &lt;input id="user"  type="text" /&gt;
      &lt;input id="pwd" type="text" /&gt;
      &lt;input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required&gt;
          &lt;span class="fileuploadlabl"&gt;Upload&lt;/span&gt;
      &lt;div class="login-btn"&gt;
          &lt;button type="submit" class="btn btn-primary" name="submit" &gt;SUBMIT&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Script Code</p>
  
  <pre><code>&lt;script&gt;
  $( document ).ready(function() {
  
     $(".login-btn").click(function(){
       var user = $("#user").val();
      var pwd = $("#pwd").val();
  
       if(!user){
  
         $("#user").addClass("makeRed");
       }
         else
         {
         $("#user").removeClass("makeRed");
         }
    if(!pwd){
  
         $("#pwd").addClass("makeRed");
       }
         else
         {
         $("#pwd").removeClass("makeRed");
         }     
     });
      $("#user").click(function(){
         $("#user").removeClass("makeRed");
  
      });
        $("#pwd").click(function(){
          $("#pwd").removeClass("makeRed");
  
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code>.makeRed{
  
    border: 2px solid red !important;
  
  }
  </code></pre>