fix(ui): do not allow submission of invalid form inputs (#1799)

src/components/Settings/SettingsMain.tsx

@@ -178,7 +178,14 @@ const SettingsMain: React.FC = () => {
             }
           }}
         >
-          {({ errors, touched, isSubmitting, values, setFieldValue }) => {
+          {({
+            errors,
+            touched,
+            isSubmitting,
+            isValid,
+            values,
+            setFieldValue,
+          }) => {
             return (
               <Form className="section">
                 {userHasPermission(Permission.ADMIN) && (
@@ -397,7 +404,7 @@ const SettingsMain: React.FC = () => {
                       <Button
                         buttonType="primary"
                         type="submit"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !isValid}
                       >
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)

src/components/Settings/SettingsPlex.tsx

@@ -342,6 +342,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
           handleSubmit,
           setFieldValue,
           isSubmitting,
+          isValid,
         }) => {
           return (
             <form className="section" onSubmit={handleSubmit}>
@@ -517,7 +518,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     <Button
                       buttonType="primary"
                       type="submit"
-                      disabled={isSubmitting}
+                      disabled={isSubmitting || !isValid}
                     >
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx

@@ -143,7 +143,7 @@ const UserPasswordChange: React.FC = () => {
           }
         }}
       >
-        {({ errors, touched, isSubmitting }) => {
+        {({ errors, touched, isSubmitting, isValid }) => {
           return (
             <Form className="section">
               {!data.hasPassword && (
@@ -221,7 +221,7 @@ const UserPasswordChange: React.FC = () => {
                     <Button
                       buttonType="primary"
                       type="submit"
-                      disabled={isSubmitting}
+                      disabled={isSubmitting || !isValid}
                     >
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)