javascriptは、空の値にもかかわらずaria属性の値を切り替えるだけで検証を無視します

Question

HTMLのaria-required属性を使用して、テキストボックスが空であるかどうかを確認します。ぼかしたときに値がない場合は、赤で色付けされ、値がある場合は白に戻ります。結果は驚くべきものでした。フォーカスしてぼかしたときに属性のブール値をトグルし、検証を無視します。

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>

値なしでテキストボックスをぼかし、次に焦点を当ててみ、それはaria-requiredの属性値を切り替えます。

Answer 1

あなたのコードでは、!requiredは、あなたが望んでいないブール値を反転しています。ここで

は作業例です：

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デモ：https://jsfiddle.net/ekj8brav/5/

はここrequired属性を使用してCSS :validと:invalid擬似セレクターを使用して、それをスタイリング入力フィールドを検証するための別の方法です：

<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デモ：https://jsfiddle.net/eph607up/2/