CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapvalidationjquery-tags-input
Sam
Sam

Reputation: 1381

validation on form input not working

I have a form that look like this

<form  data-toggle="validator" role="form" method="post" >
  <input type="text" id="first_name" name="first_name" required >
  <input id="rec_skill" name="tags-4" type="text" required>
  <select class="profile-select" name="industry" id="industry" required>
    <option value="">INDUSTRY </option>
       <?php foreach($industry as $indus): ?>
      <option value="<?php echo $indus->industry; ?>" >
        <?php echo $indus->industry; ?>
      </option>
       <?php endforeach; ?>
  </select>
  <input id="skills" name="skills" type="text" value=""  class="form-control" required>
  <button type="submit" class="btn btn-primary psbtn-bg" id="submit_profile" >SUBMIT</button>
</form>

On click of a submit button if a input field is empty then it gets highlighted like this

enter image description here

and the code related to this part is

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");
  }

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 

 <input id="rec_skill" name="tags-4" type="text" required>

And 

 <input id="skills" name="skills" type="text" value=""  class="form-control"
 required>

Above mentioned 2 input fields are created using this plugin and under this plugin "Tags input with autocomplete functionality" is being used

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

$("#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");
      }
  });

Can anyone please suggest how to remove the highlighted color if a value has been inserted or selected by user

Upvotes: 0

Views: 577

Answers (1)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

Your jQuery is not correct. First of all your input has IDs rec_skills and skills so to call an element with Id you should use $(#idname) not $(.idname). Secondly there is no element present with class name .taginput in your code. Please take a look at the snippet for reference.

EDIT : its also better to use focusout in this condition to check if user skips the input field without putting any value.

$("#rec_skill").focusout(function() 
  {
    if ($(this).val() === "") 
      {
        $(this).css("border", " 1px solid #B94A48");
      }
    else
      {
        $(this).css("border", "1px solid #ccc");
      }
  });

$("#skills").focusout(function() 
  {
    if ($(this).val() === "") 
      {
        $(this).css("border", " 1px solid #B94A48");
      }
    else
      {
        $(this).css("border", "1px solid #ccc");
      }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<input id="rec_skill" name="tags-4" type="text" required> 


<input id="skills" name="skills" type="text" value=""  class="form-control"
 required>

Hope this help

Upvotes: 0

Related Questions