自動完成與檢查空輸入

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

日期選擇器完美的作品，所以我並不需要這個幫助。但是，我的問題是，我已經在js中創建了一個函數，當它變空時我的輸入變成背景色。它適用於我在窗體上的所有輸入，除了輸入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輸入字段的。

對於輸入類型的時間，您將獲得一個空字符串或值。如果該字段將被填滿，時間值不是空的。

的片段：

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>