@@ -7,13 +7,17 @@ function showError(input, errorElement, message) {
77 errorElement . textContent = message ;
88 } , 10 ) ;
99
10- input . classList . add ( "usa-input--error" ) ;
10+ if ( input . type !== "radio" && input . type !== "checkbox" ) {
11+ input . classList . add ( "usa-input--error" ) ;
12+ }
1113 input . setAttribute ( "aria-describedby" , errorElement . id ) ;
1214}
1315
1416function hideError ( input , errorElement ) {
1517 errorElement . style . display = "none" ;
16- input . classList . remove ( "usa-input--error" ) ;
18+ if ( input . type !== "radio" && input . type !== "checkbox" ) {
19+ input . classList . remove ( "usa-input--error" ) ;
20+ }
1721 input . removeAttribute ( "aria-describedby" ) ;
1822}
1923
@@ -24,33 +28,42 @@ function getFieldLabel(input) {
2428
2529// Attach validation logic to forms
2630function attachValidation ( ) {
27- const forms = document . querySelectorAll ( " form.send-one-off-form" ) ;
31+ const forms = document . querySelectorAll ( ' form[data-force-focus="True"]' ) ;
2832 forms . forEach ( ( form ) => {
2933 const inputs = form . querySelectorAll ( "input, textarea, select" ) ;
3034
3135 form . addEventListener ( "submit" , function ( event ) {
3236 let isValid = true ;
3337 let firstInvalidInput = null ;
38+ const validatedRadioNames = new Set ( ) ;
3439
3540 inputs . forEach ( ( input ) => {
36- const errorId = input . id ? `${ input . id } -error` : `${ input . name } -error` ;
41+ const errorId = input . type === "radio" ? `${ input . name } -error` : `${ input . id } -error` ;
3742 let errorElement = document . getElementById ( errorId ) ;
3843
3944 if ( ! errorElement ) {
4045 errorElement = document . createElement ( "span" ) ;
4146 errorElement . id = errorId ;
4247 errorElement . classList . add ( "usa-error-message" ) ;
4348 errorElement . setAttribute ( "aria-live" , "polite" ) ;
44- input . insertAdjacentElement ( "afterend" , errorElement ) ;
49+ errorElement . style . display = "none" ;
50+ if ( input . type === "radio" ) {
51+ const group = form . querySelectorAll ( `input[name="${ input . name } "]` ) ;
52+ const lastRadio = group [ group . length - 1 ] ;
53+ lastRadio . parentElement . insertAdjacentElement ( "afterend" , errorElement ) ;
54+ } else {
55+ input . insertAdjacentElement ( "afterend" , errorElement ) ;
56+ }
4557 }
4658
4759 if ( input . type === "radio" ) {
48- // Find all radio buttons with the same name
49- const radioGroup = document . querySelectorAll ( `input[name="${ input . name } "]` ) ;
60+ if ( validatedRadioNames . has ( input . name ) ) return ;
61+ validatedRadioNames . add ( input . name ) ;
62+ const radioGroup = form . querySelectorAll ( `input[name="${ input . name } "]` ) ;
5063 const isChecked = Array . from ( radioGroup ) . some ( radio => radio . checked ) ;
5164
5265 if ( ! isChecked ) {
53- showError ( input , errorElement , `Error: ${ getFieldLabel ( input ) } must be selected .` ) ;
66+ showError ( input , errorElement , `Error: A selection must be made .` ) ;
5467 isValid = false ;
5568 if ( ! firstInvalidInput ) {
5669 firstInvalidInput = input ;
@@ -73,11 +86,20 @@ function attachValidation() {
7386
7487 inputs . forEach ( ( input ) => {
7588 input . addEventListener ( "input" , function ( ) {
76- const errorElement = document . getElementById ( `${ input . id } -error` ) ;
77- if ( input . value . trim ( ) !== "" && errorElement ) {
89+ const errorId = input . type === "radio" ? `${ input . name } -error` : `${ input . id } -error` ;
90+ const errorElement = document . getElementById ( errorId ) ;
91+ if ( errorElement && input . value . trim ( ) !== "" ) {
7892 hideError ( input , errorElement ) ;
7993 }
8094 } ) ;
95+ if ( input . type === "radio" ) {
96+ input . addEventListener ( "change" , function ( ) {
97+ const errorElement = document . getElementById ( `${ input . name } -error` ) ;
98+ if ( errorElement ) {
99+ hideError ( input , errorElement ) ;
100+ }
101+ } ) ;
102+ }
81103 } ) ;
82104 } ) ;
83105}
0 commit comments