Other / Validation / Check Required Fields on This Page W3C Bookmarklet

The Check Required Fields bookmarklet identifies and highlights all required form fields on the page using W3C methodology. Finds labels for required fields (via required attribute, asterisk in label text, or repeated required text patterns), adds yellow "Required field" badges above each required field label, outlines labels with dashed yellow lines, and displays an informational panel in the bottom-right corner with a link to W3C's "Checking Required Fields" guidance. Run again to remove badges and panel.

javascript:%21function()%7Bdocument.querySelectorAll(%22%23wai-styles%2C%23wai-info-box%2C.required-span%22).forEach(function(e)%7Be.remove()%7D)%2Cdocument.querySelector(%22body%22).insertAdjacentHTML(%22afterbegin%22%2C%22%3Cstyle%20id%3D%27wai-styles%27%3E%23wai-info-box%7Bz-index%3A1000%3Bcolor%3Ablack%3Bfont-family%3ANoto%20Sans%2CTrebuchet%20MS%2CHelvetica%20Neue%2CArial%2Csans-serif%3Bborder%3Asolid%201px%20%23ddd%3Bbackground-color%3A%23fff%3Bbox-shadow%3A0%204px%208px%200%20rgba(0%2C0%2C0%2C0.2)%2C0%206px%2020px%200%20rgba(0%2C0%2C0%2C0.19)%3B%7D%23wai-info-box%20header%7Bfont-weight%3A700%3Bbackground-color%3A%23f2f2f2%3Bcolor%3A%23005a6a%3Bpadding%3A8px%2016px%3B%7D%23wai-info-box%20header%20a%7Bfloat%3Aright%3Btext-decoration%3Anone%7D%23wai-info-box%20div%7Bpadding%3A8px%2016px%3B%7D.wai-more-info%7Bposition%3Afixed%3Bbottom%3A5em%3Bright%3A5em%7D.wai-error%7Bposition%3Afixed%3Bwidth%3A40%25%3Btop%3A40%25%3Bleft%3A50%25%3Btransform%3Atranslate(-50%25%2C-50%25)%7D.required-span%7Bdisplay%3Ablock%3Bwidth%3Afit-content%3Bcolor%3Ablack%3Bfont-weight%3Abold%3Bfont-size%3Asmall%3Bfont-family%3ANoto%20Sans%2CTrebuchet%20MS%2CHelvetica%20Neue%2CArial%2Csans-serif%3Bbackground-color%3A%23eed009%3Bpadding%3A4px%3Bspeak%3Aliteral-punctuation%7D.required-label%7Boutline%3A%23eed009%202px%20dashed%7D%3C%2Fstyle%3E%22)%3Bconst%20e%3DArray.prototype.slice.call(document.querySelectorAll(%22label%22))%2Ct%3D%5B%5D%2Cr%3D%5B%5D%3Bif(e)%7Bfor(let%20i%2Ca%3D0%3Ba%3Ce.length%3Ba%2B%2B)%7Bi%3D%22%22%2C(i%3De%5Ba%5D.querySelector(%22input%2Cselect%2Ctextarea%22))%3F(i.required%7C%7Ce%5Ba%5D.innerText.search(%2F%5C*%2F))%26%26t.push(%7BlabelText%3Ae%5Ba%5D.innerText%2Clabel%3Ae%5Ba%5D%2Cfield%3Ai%7D)%3Ae%5Ba%5D.getAttribute(%22for%22)%26%26(i%3Ddocument.getElementById(e%5Ba%5D.getAttribute(%22for%22))%2C(i.required%7C%7C0%3Ce%5Ba%5D.innerText.search(%2F%5C*%2F))%26%26t.push(%7BlabelText%3Ae%5Ba%5D.innerText%2Clabel%3Ae%5Ba%5D%2Cfield%3Ai%7D))%2C%5B...e%5Ba%5D.innerText.matchAll(%2F%5Cw%7B2%2C%7D%2Fg)%5D.forEach(e%3D%3E%7Br%5Be%5B0%5D%5D%3Fr%5Be%5B0%5D%5D%2B%2B%3Ar%5Be%5B0%5D%5D%3D1%7D)%7Dfor(let%20i%20in%20r)if(2%3Cr%5Bi%5D)%7Blet%20r%3De.filter(function(e)%7Breturn%200%3C%3De.textContent.search(i)%7D)%3Bif(0%3Cr.length)for(let%20e%3D0%3Be%3Cr.length%3Be%2B%2B)t%5Br%5Be%5D.innerText%5D%7C%7Ct.push(%7BlabelText%3Ar%5Be%5D.innerText%2Clabel%3Ar%5Be%5D%2CrequiredText%3Ai%7D)%7Dfor(let%20e%2Cr%3D0%3Br%3Ct.length%3Br%2B%2B)e%3Dt%5Br%5D%2Ce.requiredText%3F(e.label.classList.add(%22required-label%22)%2Ce.label.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cspan%20class%3D%27required-span%27%3ECorrectly%20marked%20with%20%27%22%2Be.requiredText%2B%22%27%3F%3C%2Fspan%3E%22))%3A(e.label.classList.add(%22required-label%22)%2Ce.label.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cspan%20class%3D%27required-span%27%3ERequired%20field%3C%2Fspan%3E%22))%3Bdocument.querySelector(%22body%22).insertAdjacentHTML(%22beforeend%22%2C%22%3Caside%20id%3D%27wai-info-box%27%20class%3D%27wai-more-info%27%3E%3Cheader%3EFind%20out%20more%3Ca%20href%3Djavascript%3Adocument.querySelectorAll(%27%23wai-styles%2C%23wai-info-box%2C.required-span%27).forEach(function(el)%7Bel.remove()%7D)%3B%20aria-label%3Ddismiss%3EX%3C%2Fa%3E%3C%2Fheader%3E%3Cdiv%3E%3Ca%20href%3D%27https%3A%2F%2Fw3.org%2Fwai%2Ftest-evaluate%2Feasy-checks%2Frequired-fields%2F%27%3EChecking%20Required%20Fields%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Faside%3E%22)%7D%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fwww.w3.org%2FWAI%2Ftest-evaluate%2Feasy-checks%2Frequired-fields%2F%5CnBookmarklet%20name%3A%20Check%20required%20fields%20on%20this%20page%5Cn%22)%3B