fix: reset password validations (#6153)

Co-authored-by: Elliot DeNolf <denolfe@gmail.com>
Co-authored-by: James <james@trbl.design>
Co-authored-by: Alessio Gravili <alessio@gravili.de>

test/admin/components/views/CustomView/index.client.tsx

@@ -0,0 +1,54 @@
+'use client'
+import { ConfirmPassword } from '@payloadcms/ui/fields/ConfirmPassword'
+import { Password } from '@payloadcms/ui/fields/Password'
+import { Form, useFormFields } from '@payloadcms/ui/forms/Form'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import React from 'react'
+
+export const ClientForm: React.FC = () => {
+  return (
+    <Form
+      initialState={{
+        'confirm-password': {
+          initialValue: '',
+          valid: false,
+          value: '',
+        },
+        password: {
+          initialValue: '',
+          valid: false,
+          value: '',
+        },
+      }}
+    >
+      <CustomPassword />
+      <ConfirmPassword />
+
+      <FormSubmit>Submit</FormSubmit>
+    </Form>
+  )
+}
+
+const CustomPassword: React.FC = () => {
+  const confirmPassword = useFormFields(([fields]) => {
+    return fields['confirm-password']
+  })
+
+  const confirmValue = confirmPassword.value
+
+  return (
+    <Password
+      autoComplete="off"
+      label="Password"
+      name="password"
+      required
+      validate={(value) => {
+        if (value && confirmValue) {
+          return confirmValue === value ? true : 'Passwords must match!!!!'
+        }
+
+        return 'Field is required'
+      }}
+    />
+  )
+}

test/admin/components/views/CustomView/index.tsx

@@ -1,13 +1,14 @@
+import type { AdminViewProps } from 'payload/types'
+
 import LinkImport from 'next/link.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../../../../../packages/payload/types.js'
-
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 import { Button } from '@payloadcms/ui/elements/Button'
 
 import { customNestedViewPath, customViewTitle } from '../../../shared.js'
+import { ClientForm } from './index.client.js'
 
 export const CustomView: React.FC<AdminViewProps> = ({ initPageResult }) => {
   const {
@@ -48,6 +49,7 @@ export const CustomView: React.FC<AdminViewProps> = ({ initPageResult }) => {
         >
           Go to Nested View
         </Button>
+        <ClientForm />
       </div>
     </div>
   )