ChromeでJavaScriptを使用して必要なプロパティを削除したときにcheckValidity（）がfalseになる

何かが見つからない限り、これはChromeのバグのようです。ChromeでJavaScriptを使用して必要なプロパティを削除したときにcheckValidity（）がfalseになる

ここには2つの無線要素を持つ3つの形式があります。必須の属性がない場合、フォームのcheckValidity（）は期待どおりtrueを返します。必要な属性がある場合、フォームのcheckValidity（）は、期待どおりにfalseを返します。

ただし、JavaScriptで必要な属性が削除されると、checkValidity（）はfalseを返します。これは私が期待するものではありません。任意の説明/回避策が評価されました！これはSafariとFirefoxで正しく動作し、Chromeでは動作しません。

console.log('Valid form: ' + document.getElementById('validForm').checkValidity()); 
 
console.log('Invalid form: ' + document.getElementById('invalidForm').checkValidity()); 
 
//document.getElementById('rad1').required = false; //Neither this nor below work 
 
//document.getElementById('rad2').required = false; 
 
document.getElementById('rad1').removeAttribute('required'); 
 
document.getElementById('rad2').removeAttribute('required'); 
 
console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity());

<form id="validForm"> 
 
    <input type="radio" name="my radio 1" value="option 1"> 
 
    <input type="radio" name="my radio 1" value="option 2"> 
 
</form> 
 
<form id="invalidForm"> 
 
    <input type="radio" name="my radio 2" value="option 1" required> 
 
    <input type="radio" name="my radio 2" value="option 2" required> 
 
</form> 
 
<form id="shouldBeValidForm"> 
 
    <input id="rad1" type="radio" name="my radio 3" value="option 1" required> 
 
    <input id="rad2" type="radio" name="my radio 3" value="option 2" required> 
 
</form>

出典

2016-04-01 AllTheCodez

あなたはすでに私のために 'checkValidity removeAttribute' https://www.google.com/?q=checkValidity+removeAttribute – trex005

作品のためにGoogleで最初の結果です。 Chromium 51.0.2674.0 – Oriol

興味深い。私は49.0.2623.87にあり、他の49.xxユーザーも同じ結果を確認しています。それにもかかわらず、古いブラウザを使用しているユーザーをサポートする必要があるため、回避策が残っています。入力をJSで完全に再描画する以外のアイデアはありますか？ – AllTheCodez

私は今、確実にこれがChromeでバグであると言うことができます - 必要な属性は、ハード設定されている場合は、削除しても（妥当性のために）無視されることはありません、その項目の属性のリストにはもはやありません。 Chromium 51で実際に修正されている場合は、修正するまで待つ必要はありません。その間、ハード設定された「必須」属性を削除し、「setAttribute」機能を使用してその属性を動的に配置することができます。

確認するには、次のコードを参照してください - これは午後の作業です。デフォルトでは、必須属性タグは削除されているため、有効です。「Set Required」をクリックすると無効になります。それを削除すると正常に動作します。「属性の印刷」（コンソールへのログ）をクリックすると、Radの属性をチェックすることで、正しく適用されていることがわかります。

ラジオボタンを選択すると、ラジオボタンがクリアされます。

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
    <form id="shouldBeValidForm"> 
 
    <input id="rad1" type="radio" name="my radio 3" value="option 1"> 
 
    <input id="rad2" type="radio" name="my radio 3" value="option 2"> 
 
    </form> 
 

 
    <button onclick="setRequired()">Set Required</button> 
 
    <button onclick="removeRequired()">Remove Required</button> 
 
    <button onclick="checkValid()">Check if Valid</button> 
 
    <button onclick="printAttr()">Print Attributes</button> 
 
    <button onclick="clearButton()">Reset Rads</button> 
 

 
    <script> 
 
    function setRequired() { 
 

 
     document.getElementById("rad1").setAttribute("required", ""); 
 
     document.getElementById("rad2").setAttribute("required", ""); 
 

 
     //document.getElementById('shouldBeValidForm').validate(); 
 

 
    } 
 

 
    function removeRequired() { 
 
     document.getElementById("rad2").removeAttribute("required"); 
 
     document.getElementById("rad1").removeAttribute("required"); 
 
    } 
 

 
    function checkValid() { 
 
     console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity()); 
 
     console.log('Rad1: ' + document.getElementById('rad1').checkValidity()); 
 
     console.log('Rad2: ' + document.getElementById('rad2').checkValidity()); 
 

 
     console.log('willValidate: Rad1: ' + document.getElementById('rad1').willValidate); 
 
     console.log('willValidate: Rad2: ' + document.getElementById('rad2').willValidate); 
 

 
     console.log('validationMessage: Rad1: ' + document.getElementById('rad1').validationMessage); 
 
     console.log('validationMessage: Rad2: ' + document.getElementById('rad2').validationMessage); 
 

 
    } 
 

 
    function printAttr() { 
 
     console.log("rad1 Attributes"); 
 
     var el = document.getElementById("rad1"); 
 
     for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) { 
 
     console.log(atts[i].nodeName); 
 
     } 
 

 
     console.log("rad2 Attributes"); 
 
     var el = document.getElementById("rad2"); 
 
     for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) { 
 
     console.log(atts[i].nodeName); 
 
     } 
 

 
    } 
 

 
    function clearButton() { 
 
     document.getElementById("rad1").checked = false; 
 
     document.getElementById("rad2").checked = false; 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

出典

2016-04-01 06:11:05

ChromeでJavaScriptを使用して必要なプロパティを削除したときにcheckValidity（）がfalseになる

答えて

関連する問題