CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
Kuartz
Kuartz

Reputation: 41

autocomplete with checking empty inputs

Here is a part of my HTML code:

<div class="form-group">
  <label for="date_chargement" class="col-sm-4 control-label">Date de chargement minimum :</label>
  <div class="col-sm-2">
      <input type="text" class="form-control text-center" name="dateMinChargement" id="datepicker" onblur="VerifChampVide(this)"/>
  </div>
  <label for="heure_debut_chargement" class="col-sm-4 control-label">Heure de début :</label>
  <div class="col-sm-2">
      <input type="time" class="form-control text-center" name="heureDebutChargement" onblur="verifChampVide(this)">
  </div>
</div>

My JS code :

jQuery(document).ready(function($){
    $("#datepicker").datepicker({
        autoUpdateInput: false
    });
    $("#datepicker2").datepicker({
        autoUpdateInput: false
    });
});

function surligne(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#B43045";
   else
      champ.style.backgroundColor = "";
}

function verifChampVide(champ)
{
   if(champ.value == '')
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

Datepicker works perfectly, so I don't need help on this. But, my problem is that I have created a function in js which change my inputs backcolor when it is empty. It works on all of my inputs on the form except the input where I put datepicker.

I read a lot on the web and I found the autoUpdateInput option. But it doesn't work.

Thank you for your help.

Upvotes: 1

Views: 674

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

You have an error in this line:

<input type="text" class="form-control text-center" name="dateMinChargement" id="datepicker" onblur="VerifChampVide(this)"/>

You try to call the function VerifChampVide but you defined it as verifChampVide. JS is case sensitive.

For the second: because you have a datepicker you need to use the hide event instead of onblur.

Pay attention to the label for values and the id of the input fields.

For the input type time you will get an empty string or a value. The time value is not empty if the field will be filled to capacity.

The snippet:

jQuery(document).ready(function($){
  $("#datepicker").datepicker({
    autoUpdateInput: false
  }).on('hide', function(e) {
    verifChampVide(this);
  });
  $("#datepicker2").datepicker({
    autoUpdateInput: false
  });
});

function surligne(champ, erreur)
{
  if(erreur)
    champ.style.backgroundColor = "#B43045";
  else
    champ.style.backgroundColor = "";
}

function verifChampVide(champ)
{
  if(champ.value == '')
  {
    surligne(champ, true);
    return false;
  }
  else
  {
    surligne(champ, false);
    return true;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>


<div class="form-group">
    <label for="datepicker" class="col-sm-4 control-label">Date de chargement minimum :</label>
    <div class="col-sm-2">
        <input type="text" class="form-control text-center" name="dateMinChargement" id="datepicker"/>
    </div>
    <label for="heure_debut_chargement" class="col-sm-4 control-label">Heure de début :</label>
    <div class="col-sm-2">
        <input type="time" id="heure_debut_chargement" class="form-control text-center" name="heureDebutChargement" onblur="verifChampVide(this)">
    </div>
</div>

Upvotes: 2

Related Questions