title: validation on form input not working
body: <p>I have a form that look like this</p>
  
  <pre><code>&lt;form  data-toggle="validator" role="form" method="post" &gt;
    &lt;input type="text" id="first_name" name="first_name" required &gt;
    &lt;input id="rec_skill" name="tags-4" type="text" required&gt;
    &lt;select class="profile-select" name="industry" id="industry" required&gt;
      &lt;option value=""&gt;INDUSTRY &lt;/option&gt;
         &lt;?php foreach($industry as $indus): ?&gt;
        &lt;option value="&lt;?php echo $indus-&gt;industry; ?&gt;" &gt;
          &lt;?php echo $indus-&gt;industry; ?&gt;
        &lt;/option&gt;
         &lt;?php endforeach; ?&gt;
    &lt;/select&gt;
    &lt;input id="skills" name="skills" type="text" value=""  class="form-control" required&gt;
    &lt;button type="submit" class="btn btn-primary psbtn-bg" id="submit_profile" &gt;SUBMIT&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>On click of a submit button if a input field is empty then it gets highlighted like this</p>
  
  <p><a href="https://i.stack.imgur.com/AxB9P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AxB9P.png" alt="enter image description here"></a></p>
  
  <p>and the code related to this part is</p>
  
  <pre><code>if(rec_skill=="" || rec_skill==null)
    {
      $(".tagsinput").css("border", " 1px solid #B94A48");
    }
  else
    {
      $(".tagsinput").css("border", "1px solid #ccc");
    }
  
  if(skills!='')
    {
      $(".tagsinput").css("border", "1px solid #ccc");
    }
  else
    {
      $(".tagsinput").css("border", " 1px solid #B94A48");
    }
  </code></pre>
  
  <p>Now if a user fills any value in these input fields the highlighted color is removed. It is working fine for normal input fields but not for </p>
  
  <pre><code> &lt;input id="rec_skill" name="tags-4" type="text" required&gt; 
  </code></pre>
  
  <blockquote>
    <p>And </p>
  </blockquote>
  
  <pre><code> &lt;input id="skills" name="skills" type="text" value=""  class="form-control"
   required&gt;
  </code></pre>
  
  <p>Above mentioned 2 input fields are created using this <a href="https://github.com/underovsky/jquery-tagsinput-revisited" rel="nofollow noreferrer">plugin</a> and under this plugin "Tags input with autocomplete functionality" is being used</p>
  
  <p>Now if a user fills these 2 input values the highlighted color is not disappearing. the code that i used to create this functionality was</p>
  
  <pre><code>$("#rec_skill").change(function() 
    {
      if ($(this).val() == "") 
        {
          $(".tagsinput").css("border", " 1px solid #B94A48");
        }
      else
        {
          $(".tagsinput").css("border", "1px solid #ccc");
        }
    });
  
  $("#skills").change(function() 
    {
      if ($(this).val() == "") 
        {
          $(".tagsinput").css("border", " 1px solid #B94A48");
        }
      else
        {
          $(".tagsinput").css("border", "1px solid #ccc");
        }
    });
  </code></pre>
  
  <p>Can anyone please suggest how to remove the highlighted color if a value has been inserted or selected by user</p>