Validieren eine Form

Question

IMS arbeitet an einer einfachen Form, und ich bin versucht, die Felder zu validieren, mit folgendem Code mir in der Lage, das Feld zu validieren und eine Nachricht hinzufügen, wenn das Feld leer ist. }

Answer 1

Ändern Sie Ihren JavaScript-Code zu folgenden:

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')">

Ich habe eine Funktion findLable hinzugefügt, um das Etikett für diesen Eingang zu bekommen, und die Verwendung dieser, zugegeben Fehlerklasse zu, dass Etikette.

Answer 2

Die Spanne wird als Klasse „Fehler“ definiert, aber sie haben nicht diese Klasse definiert sind.

Answer 3

Zuerst müssen Sie die Seite für Etiketten scannen:

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

Dann können Sie einfach in Ihre IF-ELSE Bedingung verwenden folgende,

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

und

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

I hat auch eine CSS-Klasse hinzugefügt, damit der Text rot ist.

.red-text { 
    color: #ff0000; 
} 

Schlusscode:

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

Ich denke, es ist besser, Unschärfe und Eingabeereignisse zu binden

der Code:

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