验证表格

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