Fix validation message display in ValidatingForm (#135)

- Use more specific class selectors to show invalid feedback only when
  form was validated and input is `:invalid`, similar to Bootstrap v5

apps/site/src/app/guest-login/components/VerificationForm.tsx

@@ -44,7 +44,7 @@ function VerificationForm() {
 						A login passphrase was sent to your email. Please enter
 						the passphrase.
 					</small>
-					<p className={clsx(styles.invalidated, "text-red-500")}>
+					<p className={clsx(styles.invalidFeedback, "text-red-500")}>
 						Sorry, that passphrase is invalid.
 					</p>
 				</div>

apps/site/src/app/login/components/LoginForm.tsx

@@ -27,7 +27,7 @@ function LoginForm() {
 						UCI students will log in with UCI SSO. Please make sure
 						to use your school email address if you have one.
 					</small>
-					<p className={clsx(styles.invalidated, "text-red-500")}>
+					<p className={clsx(styles.invalidFeedback, "text-red-500")}>
 						Sorry, that email address is invalid.
 					</p>
 				</div>

apps/site/src/lib/components/ValidatingForm/ValidatingForm.module.scss

@@ -1,9 +1,9 @@
+.invalidFeedback {
+	display: none;
+}
+
 .validated {
-	&:invalid .invalidated {
+	:invalid ~ .invalidFeedback {
 		display: block;
 	}
 }
-
-.notYetValidated .invalidated {
-	display: none;
-}