Question

以下是我的HTML代码的一部分：

<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>

我的JS代码：

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工作得很好，所以我不需要帮助。但是，我的问题是我在js中创建了一个函数，当它为空时改变我的输入backcolor。它适用于表单上的所有输入，除了我输入datepicker的输入。

我在网上看了很多，然后找到了autoUpdateInput选项。但它没有用。

感谢您的帮助。

Answer 1

此行中有错误：

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

您尝试调用 VerifChampVide 功能，但您将其定义为 verifChampVide 。 JS区分大小写。

对于第二个：因为你有一个日期选择器，你需要使用hide事件而不是onblur。

请注意输入字段的标签值和 id 。

对于输入类型时间，您将获得空字符串或值。如果该字段将被填充到容量，则时间值不为空。

摘录：

＆＃13;

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

＆＃13;

<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>

＆＃13;

自动完成检查空输入

1 个答案: