Display "Header is valid" when no issue was detected (#526)

Co-authored-by: Andrew Paseltiner <apaseltiner@google.com>

validate-headers.html

@@ -67,6 +67,7 @@ <h1>Attribution Reporting Header Validation</h1>
       <legend>Validation Result</legend>
       <button type=button id=linkify>Copy Link</button>
       <output>
+        <div id=success></div>
         <p>Errors:
         <ul id=errors></ul>
         <p>Warnings:
@@ -85,6 +86,7 @@ <h1>Attribution Reporting Header Validation</h1>
 const input = form.querySelector('textarea');
 const errorList = document.querySelector('#errors');
 const warningList = document.querySelector('#warnings');
+const successDiv = document.querySelector('#success');
 
 const pathfulTmpl = document.querySelector('#pathful-issue');
 
@@ -120,6 +122,14 @@ <h1>Attribution Reporting Header Validation</h1>
 
   const result = validateJSON(input.value, validate);
 
+  const successEl = document.createElement('div');
+  if (result?.errors?.length === 0 && result?.warnings?.length === 0) {
+    successEl.textContent = 'The header is valid.';
+  } else {
+    successEl.textContent = '';
+  }
+  successDiv.replaceChildren(successEl);
+
   errorList.replaceChildren(...result.errors.map(makeLi));
   warningList.replaceChildren(...result.warnings.map(makeLi));
 });