驗證表格

Question

即時通訊工作在一個簡單的形式，我試圖驗證字段， 與下面的代碼我能夠驗證該字段，並添加一個消息，如果該字段爲空。 }

Answer 1

改變你的JavaScript代碼如下：

function validation(id) { 
 
    var value = document.getElementById(id).value; 
 
    if (value === "" || value == null) { 
 
    document.getElementById('Err' + id).innerHTML = "- Field Required"; 
 
    document.getElementById(id).classList.add('class'); 
 
    var label = findLabel(document.getElementById('Name')); 
 
    label.classList.add('class'); 
 
    } else { 
 
    document.getElementById('Err' + id).innerHTML = ""; 
 
    document.getElementById(id).classList.remove('class'); 
 
    var label = findLabel(document.getElementById('Name')); 
 
    label.classList.remove('class'); 
 
    } 
 
} 
 

 
function findLabel(el) { 
 
    var idVal = el.id; 
 
    labels = document.getElementsByTagName('label'); 
 
    for (var i = 0; i < labels.length; i++) { 
 
    if (labels[i].htmlFor == idVal) 
 
     return labels[i]; 
 
    } 
 
}

.class 
 
{ 
 
    background: #f97d7d; 
 
    color: #ff0000; 
 
    border: 1px solid #ff0000 !important; 
 
}

<label class="" for="Name">* Name <span class="error" id="ErrName"></span></label> 
 
<input type="text" name="Name" id="Name" onblur="validation('Name')">

我添加了一個功能findLable得到該輸入的標籤，使用，添加錯誤類到標籤。

Answer 2

span被定義爲類「錯誤」，但您尚未定義該類。

Answer 3

首先您需要掃描的頁面標籤：

var labels = document.getElementsByTagName('LABEL'); 
    for (var i = 0; i < labels.length; i++) { 
    if (labels[i].htmlFor != '') { 
     var elem = document.getElementById(labels[i].htmlFor); 
     if (elem) 
     elem.label = labels[i]; 
    } 
    } 

然後，你可以簡單地使用在IF-ELSE條件下，

document.getElementById(id).label.classList.add('red-text'); 

和

document.getElementById(id).label.classList.remove('red-text'); 

我還爲文本添加了CSS類爲紅色。

.red-text { 
    color: #ff0000; 
} 

最終代碼：

function validation(id) { 
 
    var labels = document.getElementsByTagName('LABEL'); 
 
    for (var i = 0; i < labels.length; i++) { 
 
    if (labels[i].htmlFor != '') { 
 
     var elem = document.getElementById(labels[i].htmlFor); 
 
     if (elem) 
 
     elem.label = labels[i]; 
 
    } 
 
    } 
 
    var value = document.getElementById(id).value; 
 
    if (value === "" || value == null) { 
 
    document.getElementById('Err' + id).innerHTML = "- Field Required"; 
 
    document.getElementById(id).classList.add('class'); 
 
    document.getElementById(id).label.classList.add('red-text'); 
 
    } else { 
 
    document.getElementById('Err' + id).innerHTML = ""; 
 
    document.getElementById(id).classList.remove('class'); 
 
    document.getElementById(id).label.classList.remove('red-text'); 
 
    } 
 
}

.class { 
 
    background: #f97d7d; 
 
    color: #ff0000; 
 
    border: 1px solid #ff0000 !important; 
 
} 
 

 
.red-text { 
 
    color: #ff0000; 
 
}

<label for="Name">* Name <span class="error" id="ErrName"></span></label> 
 
<input type="text" name="Name" id="Name" onblur="validation('Name')">

Answer 4

我覺得這是更好地結合模糊和輸入事件

代碼：

Name.addEventListener('blur', function(){ 
    if (!Name.value){ 
    ErrName.innerHTML="Field Required"; 
    this.classList.add('class'); 
    ErrName.parentNode.style.color="red"; 
    } 
}); 

Name.addEventListener('input',function(){ 
    if (Name.value.length && ErrName.innerHTML=="Field Required"){ 
    ErrName.innerHTML=""; 
    this.classList.remove('class'); 
    ErrName.parentNode.style.color="black"; 
    } 
}); 

a liddle fiddle