Javascript ignoriert die Validierung, indem Sie einfach den Wert eines Aria-Attributs trotz leerem Wert umschalten

Question

Ich verwende das Attribut aria-required in meinem HTML, um zu überprüfen, ob das Textfeld leer ist oder nicht, wenn es unscharf ist. Wenn es keinen Wert hat, wenn es unscharf ist, wird es rot und wieder weiß, wenn es einen Wert hat. Das Ergebnis war überraschend; Es schaltet nur den booleschen Wert des Attributs um, wenn es fokussiert und unscharf ist, und ignoriert die Validierung.

var txtbox = document.getElementById('textbox'); 
 

 
function isBlank(query) { 
 
    var required = (query.getAttribute('aria-required') === 'true'); 
 
    if(!query.value) { 
 
    query.setAttribute('aria-required', !required); 
 
    return true; 
 
    } else { 
 
    query.setAttribute('aria-required', required); 
 
    return false; 
 
    } 
 
} 
 

 
function validateTextbox(e) { 
 
    var evt = e.target; 
 
    
 
    isBlank(evt); 
 
} 
 

 
txtbox.addEventListener('blur', validateTextbox);

[id="textbox"][aria-required="true"] { 
 
    background: #f00; 
 
} 
 
[id="textbox"][aria-required="false"] { 
 
    background: #fff; 
 
}

<form action="" method="post"> 
 
    <input type="text" name="name" id="textbox"> 
 
    <input type="submit" value="Submit"> 
 
</form>

Versuchen Fokussierung dann ohne Wert der Textbox zu verwischen, schaltet es den Attributwert des aria-required.

Answer 1

In Ihrem Code !required wird der Boolean invertiert, was nicht das ist, was Sie wollen.

Hier ist ein funktionierendes Beispiel:

var textbox = document.getElementById('textbox') 

function isBlank(target) { 
    var required = (target.getAttribute('aria-required') === 'true') 
    var isEmpty = !target.value.length 

    target.setAttribute('aria-required', isEmpty) 
    return isEmpty 
} 

function validateTextbox(event) { 
    var target = event.target 
    isBlank(target) 
} 

textbox.addEventListener('blur', validateTextbox) 

JSFiddle Demo: https://jsfiddle.net/ekj8brav/5/

Hier ist eine andere Art und Weise Eingabefelder mit dem required Attribut zu validieren und es Styling mit CSS :valid und :invalid Pseudo-Selektoren:

<form action="" method="post"> 
    <input type="text" name="name" id="textbox"> 
    <input type="submit" value="Submit"> 
</form> 

CSS

#textbox:invalid { 
    background: #f00; 
} 

#textbox:valid { 
    background: #fff; 
} 

JS

var textbox = document.getElementById('textbox') 

function isBlank(target) { 
    var isEmpty = !target.value.length 

    if (isEmpty) { 
    target.setAttribute('required', true) 
    target.setAttribute('aria-required', true) 
    } 

    return isEmpty 
} 

function validateTextbox(event) { 
    var target = event.target 
    isBlank(target) 
} 

textbox.addEventListener('blur', validateTextbox) 

JSFiddle Demo: https://jsfiddle.net/eph607up/2/