驗證表格

Question

IM使用一種簡單的形式工作，並且我試圖驗證字段，使用下面的代碼，我可以驗證該字段並在該字段為空的情況下添加一條消息。 }

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來獲取該輸入的標簽，並使用該功能findLable標簽添加了錯誤類。

Answer 2

首先，您需要在頁面上掃描標簽：

  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 3

該范圍定義為“錯誤”類，但您尚未定義該類。

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

小提琴