diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 5427d3743..5b1bf60fb 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -37,6 +37,21 @@ import { CustomIconsPlugin } from '../icons';
 import AsyncComputed from 'vue-async-computed';
 import CKEditor from 'ckeditor4-vue';
 import VuePluralize from 'vue-pluralize';
+import { configure as validationConfigure, extend as validationExtend} from 'vee-validate';
+import { min, max, regex, required } from 'vee-validate/dist/rules';
+
+validationConfigure({
+  classes: {
+    valid: 'is-valid',
+    invalid: 'is-invalid',
+    dirty: 'is-dirty'
+  }
+})
+
+validationExtend('min', min);
+validationExtend('max', max);
+validationExtend('regex', regex);
+validationExtend('required', required);
 
 Vue.config.errorHandler = (err, vm, info) => {
   console.error(err);
diff --git a/app/javascript/profile/person_demographics.vue b/app/javascript/profile/person_demographics.vue
index 65f28fd83..9ca939db1 100644
--- a/app/javascript/profile/person_demographics.vue
+++ b/app/javascript/profile/person_demographics.vue
@@ -10,41 +10,59 @@
         <dl-person :fields="communityFields"></dl-person>
       </div>
     </div>
-    <person-edit-modal id="person-demo-modal" :person="selected" :data="demoData">
+    <person-edit-modal id="person-demo-modal" :person="selected" :data="demoData" :validate="true">
       <template #modal-title>Edit Demographics - {{selected.published_name}}</template>
       <template #default="{fields}">
-        <b-form-group label="Ethnicity">
-          <b-form-input type="text" v-model="fields.ethnicity"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Gender">
-          <b-form-input type="text" v-model="fields.gender"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Age at time of event">
-          <b-form-input type="text" v-model="fields.age_at_convention"></b-form-input>
-        </b-form-group>
-        <b-form-group label="Romantic and/or sexual orientation">
-          <b-form-textarea v-model="fields.romantic_sexual_orientation"></b-form-textarea>
-        </b-form-group>
+        <validation-provider>
+          <b-form-group label="Ethnicity">
+            <b-form-input type="text" v-model="fields.ethnicity"></b-form-input>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Gender">
+            <b-form-input type="text" v-model="fields.gender"></b-form-input>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Age at time of event">
+            <b-form-input type="text" v-model="fields.age_at_convention"></b-form-input>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Romantic and/or sexual orientation">
+            <b-form-textarea v-model="fields.romantic_sexual_orientation"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
       </template>
     </person-edit-modal>
-    <person-edit-modal id="person-community-modal" :person="selected" :data="communityData">
+    <person-edit-modal id="person-community-modal" :person="selected" :data="communityData" :validate="true">
       <template #modal-title>Edit community memberships - {{selected.published_name}}</template>
       <template #default="{fields}">
-        <b-form-group label="Experience with being &quot;othered&quot;">
-          <b-form-textarea v-model="fields.othered"></b-form-textarea>
-        </b-form-group>
-        <b-form-group label="Member of an Indigenous community">
-          <b-form-textarea v-model="fields.indigenous"></b-form-textarea>
-        </b-form-group>
-        <b-form-group label="Member of the global Black diaspora">
-          <b-form-textarea v-model="fields.black_diaspora"></b-form-textarea>
-        </b-form-group>
-        <b-form-group label="Represent something other than a purely US-centric perspective">
-          <b-form-textarea v-model="fields.non_us_centric_perspectives"></b-form-textarea>
-        </b-form-group>
-        <b-form-group label="Other demographic categories">
-          <b-form-textarea v-model="fields.demographic_categories"></b-form-textarea>
-        </b-form-group>
+        <validation-provider>
+          <b-form-group label="Experience with being &quot;othered&quot;">
+            <b-form-textarea v-model="fields.othered"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Member of an Indigenous community">
+            <b-form-textarea v-model="fields.indigenous"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Member of the global Black diaspora">
+            <b-form-textarea v-model="fields.black_diaspora"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Represent something other than a purely US-centric perspective">
+            <b-form-textarea v-model="fields.non_us_centric_perspectives"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
+          <b-form-group label="Other demographic categories">
+            <b-form-textarea v-model="fields.demographic_categories"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
       </template>
     </person-edit-modal>
   </section>
@@ -58,6 +76,7 @@ import PersonEditModal from "./person_edit_modal.vue";
 import EditButton from '@/components/edit_button';
 import DlPerson from './dl_person.vue';
 import personSessionMixin from '@/auth/person_session.mixin';
+import { ValidationProvider } from 'vee-validate';
 
 export default {
   name: "PersonDemographics",
@@ -70,7 +89,8 @@ export default {
   components: {
     PersonEditModal,
     EditButton,
-    DlPerson
+    DlPerson,
+    ValidationProvider,
   },
   data: () => ({
     model,
diff --git a/app/javascript/profile/person_details.vue b/app/javascript/profile/person_details.vue
index e0c5fa480..10d73f9e5 100644
--- a/app/javascript/profile/person_details.vue
+++ b/app/javascript/profile/person_details.vue
@@ -73,26 +73,32 @@
       <h5 class="mt-3">Social Media <edit-button v-b-modal.person-social-modal v-if="!readOnly"></edit-button></h5>
       <dl-person :fields="socialFields"></dl-person>
     </div>
-    <person-edit-modal id="person-bio-modal" :person="selected" :data="{bio: null}">
+    <person-edit-modal id="person-bio-modal" :person="selected" :data="{bio: null}" :validate="true">
       <template #modal-title>Edit Bio - {{selected.published_name}}</template>
       <template #default="{fields}">
-        <plano-editor
-          v-model="fields.bio"
-          type='classic'
-        ></plano-editor>
+        <validation-provider
+          name="Bio"
+        >
+          <plano-editor
+            v-model="fields.bio"
+            type='classic'
+          ></plano-editor>
+        </validation-provider>
       </template>
     </person-edit-modal>
-    <person-edit-modal id="person-misc-modal" :person="selected" :data="miscData">
+    <person-edit-modal id="person-misc-modal" :person="selected" :data="miscData" :validate="true">
       <template #modal-title>Edit Preferences - {{selected.published_name}}</template>
       <template #default="{fields}">
-        <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
-          <!-- TODO change edit permissions to sensitive data tickybox -->
-          <b-form-textarea v-if="canEditSensitiveInfo" v-model="fields.do_not_assign_with"></b-form-textarea>
-          <b-form-textarea v-if="!canEditSensitiveInfo" disabled value="Restricted"></b-form-textarea>
-        </b-form-group>
+        <validation-provider name="Anyone that should not be assigned with">
+          <b-form-group label="Anyone that should not be assigned to be on a panel with participant">
+            <!-- TODO change edit permissions to sensitive data tickybox -->
+            <b-form-textarea v-if="canEditSensitiveInfo" v-model="fields.do_not_assign_with"></b-form-textarea>
+            <b-form-textarea v-if="!canEditSensitiveInfo" disabled value="Restricted"></b-form-textarea>
+          </b-form-group>
+        </validation-provider>
 
-        <!-- HERE -->
-        <b-form-group label="Permission to share email with other Participants">
+        <validation-provider name="Sharing preferences">
+          <b-form-group label="Permission to share email with other Participants">
             <b-form-radio-group
               stacked
               v-model="fields.can_share"
@@ -100,9 +106,11 @@
               <b-form-radio :value="true">{{yesLabel.label}}</b-form-radio>
               <b-form-radio :value="false">{{noLabel.label}}</b-form-radio>
             </b-form-radio-group>
-        </b-form-group>
+          </b-form-group>
+        </validation-provider>
 
         <b-form-group label="Permission to be included in a livestreamed program">
+          <validation-provider>
             <b-form-radio-group
               stacked
               v-model="fields.can_stream"
@@ -111,91 +119,94 @@
               <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
               <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
             </b-form-radio-group>
+          </validation-provider>
+          <validation-provider>
             <b-textarea v-model="fields.can_stream_exceptions"></b-textarea>
+          </validation-provider>
         </b-form-group>
         <b-form-group label="Permission to be included in a recorded program">
+          <validation-provider>
             <b-form-radio-group stacked v-model="fields.can_record" >
               <b-form-radio :value="yesLabel.value">{{yesLabel.label}}</b-form-radio>
               <b-form-radio :value="noLabel.value">{{noLabel.label}}</b-form-radio>
               <b-form-radio :value="maybeLabel.value">{{maybeLabel.label}}</b-form-radio>
             </b-form-radio-group>
+          </validation-provider>
+          <validation-provider>
             <b-textarea v-model="fields.can_record_exceptions"></b-textarea>
+          </validation-provider>
         </b-form-group>
-        <b-form-group>
-        <b-form-checkbox switch v-model="fields.is_local">Local to the event</b-form-checkbox>
-        </b-form-group>
+        <validation-provider>
+          <b-form-group>
+          <b-form-checkbox switch v-model="fields.is_local">Local to the event</b-form-checkbox>
+          </b-form-group>
+        </validation-provider>
+        <validation-provider>
         <b-form-group label="Moderating experience">
           <b-form-textarea v-model="fields.moderation_experience"></b-form-textarea>
         </b-form-group>
+        </validation-provider>
       </template>
     </person-edit-modal>
-    <person-edit-modal id="person-social-modal" :person="selected" :data="socialsData">
+    <person-edit-modal id="person-social-modal" :person="selected" :data="socialsData" :validate="true">
       <template #modal-title>Edit Socials - {{selected.published_name}}</template>
       <template #default="{fields}">
-        <validated-social
-          :rules="{ regex: /^[a-z0-9_]{1,15}$/i }"
+        <simple-social
           label="Twitter"
+          :rules="{min: 1, max: 15, regex: /^[a-z0-9_]{1,15}$/i}"
           prepend="@"
           v-model="fields.twitter"
           :disabled="disabled"
-          :message="TWITTER_ID_INVALID_MSG"
-        ></validated-social>
-        <validated-social
-          :rules="{ regex: /^[a-z\d.]{5,}$/i }"
+        ></simple-social>
+        <simple-social
+          :rules="{min: 5, regex: /^[a-z\d.]{5,}$/i }"
           label="Facebook"
           prepend="facebook.com/"
           v-model="fields.facebook"
           :disabled="disabled"
-          :message="FACEBOOK_ID_INVALID_MSG"
-        ></validated-social>
-        <validated-social
+        ></simple-social>
+        <simple-social
           :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-zA-Z0-9\/]+([\-\.]{1}[a-zA-Z0-9\/]+)*\.[a-zA-Z\/]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }"
           label="Website"
           prepend="url"
           v-model="fields.website"
           :disabled="disabled"
-          :message="WEBSITE_INVALID_MSG"
-        ></validated-social>
-        <validated-social
+        ></simple-social>
+        <simple-social
           :rules="{ regex: /^[a-zA-Z0-9._]+$/ }"
           label="Instagram"
           prepend="instagram.com/"
           v-model="fields.instagram"
           :disabled="disabled"
-          :message="INSTAGRAM_ID_INVALID_MSG"
-        ></validated-social>
-        <validated-social
+        ></simple-social>
+        <simple-social
           :rules="{ regex: /^(#)?[a-zA-Z0-9][\w]{2,24}$/ }"
           label="Twitch"
           prepend="twitch.tv/"
           v-model="fields.twitch"
           :disabled="disabled"
-          :message="TWITCH_ID_INVALID_MSG"
-        ></validated-social>
-        <validated-social
+        ></simple-social>
+        <simple-social
           :rules="{ regex: /^[a-zA-Z0-9\/_]+([\-\.]{1}[a-zA-Z0-9\/_]+)*$/ }"
           label="YouTube"
           prepend="youtube.com/"
           v-model="fields.youtube"
           :disabled="disabled"
-          :message="YOUTUBE_ID_INVALID_MSG"
-        ></validated-social>
-        <validated-social
+        ></simple-social>
+        <simple-social
           :rules="{ regex:/^([a-zA-Z0-9._-])+$/ }"
           label="TikTok"
           prepend="@"
           v-model="fields.tiktok"
           :disabled="disabled"
-          :message="TIKTOK_ID_INVALID_MSG"
-        ></validated-social>
-        <validated-social
+        ></simple-social>
+        <simple-social
           :rules="{ regex:/^([a-zA-Z0-9.\/_-])+$/ }"
           label="LinkedIn"
           prepend="linkedin.com/in/"
           v-model="fields.linkedin"
           :disabled="disabled"
-          :message="LINKEDIN_ID_INVALID_MSG"
-        ></validated-social>
+        ></simple-social>
         <simple-social
           label="Other"
           v-model="fields.othersocialmedia"
@@ -219,21 +230,13 @@
 import TimezoneSelector from "@/components/timezone_selector.vue"
 import EmailAddressesEditor from "@/components/email_addresses_editor.vue"
 import PlanoEditor from '@/components/plano_editor'
-import ValidatedSocial from '@/components/validated_social.vue';
 import SimpleSocial from '../social-media/simple-social.vue';
 import EditButton from '@/components/edit_button.vue';
 import PersonEditModal from './person_edit_modal.vue';
 import DlPerson from './dl_person.vue';
+import { ValidationProvider } from 'vee-validate';
 
 import {
-  TWITTER_ID_INVALID_MSG,
-  FACEBOOK_ID_INVALID_MSG,
-  WEBSITE_INVALID_MSG,
-  INSTAGRAM_ID_INVALID_MSG,
-  TWITCH_ID_INVALID_MSG,
-  YOUTUBE_ID_INVALID_MSG,
-  TIKTOK_ID_INVALID_MSG,
-  LINKEDIN_ID_INVALID_MSG,
   PERSON_ATTENDANCE_TYPE
 } from '../constants/strings';
 import settingsMixin from "@/store/settings.mixin";
@@ -255,11 +258,11 @@ export default {
     TimezoneSelector,
     EmailAddressesEditor,
     PlanoEditor,
-    ValidatedSocial,
     SimpleSocial,
     PersonEditModal,
     EditButton,
     DlPerson,
+    ValidationProvider,
   },
   mixins: [
     settingsMixin,
@@ -269,14 +272,6 @@ export default {
   ],
   data: () =>  ({
     disabled: false,
-    TWITTER_ID_INVALID_MSG,
-    FACEBOOK_ID_INVALID_MSG,
-    WEBSITE_INVALID_MSG,
-    INSTAGRAM_ID_INVALID_MSG,
-    TWITCH_ID_INVALID_MSG,
-    YOUTUBE_ID_INVALID_MSG,
-    TIKTOK_ID_INVALID_MSG,
-    LINKEDIN_ID_INVALID_MSG,
     PERSON_ATTENDANCE_TYPE,
     model,
     miscData: {
diff --git a/app/javascript/profile/person_edit_modal.vue b/app/javascript/profile/person_edit_modal.vue
index 97d10cbc7..850abd4d3 100644
--- a/app/javascript/profile/person_edit_modal.vue
+++ b/app/javascript/profile/person_edit_modal.vue
@@ -1,14 +1,16 @@
 <template>
-  <edit-modal
-    @show="mirrorFromPerson()"
-    @ok="patchPerson()"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <!-- TODO pass model data to slots -->
-    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
-    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="{...slotData, fields: data}" /></template>
-  </edit-modal>
+  <ValidationObserver v-slot="{handleSubmit, invalid, pristine}">
+    <edit-modal
+      @show="mirrorFromPerson()"
+      @ok="handleSubmit(patchPerson())"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :ok-disabled="validate ? invalid || pristine : false"
+    >
+      <slot v-for="(_, name) in $slots" :name="name" :slot="name"></slot>
+      <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="{...slotData, fields: data}"></slot></template>
+    </edit-modal>
+  </ValidationObserver>
 </template>
 
 <script>
@@ -18,11 +20,13 @@ import { mapActions } from 'vuex';
 import toastMixin from '@/shared/toast-mixin';
 import { FETCH_BY_ID } from '@/store/model.store';
 import { PERSON_SAVE_SUCCESS } from '@/constants/strings';
+import { ValidationObserver } from 'vee-validate';
 
 export default {
   name: "PersonEditModal",
   components: {
-    EditModal
+    EditModal,
+    ValidationObserver,
   },
   mixins: [
     toastMixin
@@ -33,6 +37,10 @@ export default {
     },
     data: {
       required: true
+    },
+    validate: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
diff --git a/app/javascript/profile/person_summary.vue b/app/javascript/profile/person_summary.vue
index 2c99b4736..28fb1b9e9 100644
--- a/app/javascript/profile/person_summary.vue
+++ b/app/javascript/profile/person_summary.vue
@@ -18,21 +18,40 @@
             <b-button v-if="currentUserIsAdmin && airmeetEnabled" variant="warning" :disabled="!selected.integrations.airmeet" @click="resyncAirmeet" class="mt-2">Airmeet re-sync completed</b-button>
         </div>
       </div>
-      <person-edit-modal id="person-top-modal" body-class="formscroll" :person="selected" :data="editData">
+      <person-edit-modal id="person-top-modal" body-class="formscroll" :person="selected" :data="editData" :validate="true">
         <template #modal-title>Edit Profile - {{selected.published_name}}</template>
         <template #default="{fields}">
+          <validation-provider
+            name="Name"
+            rules="required"
+            v-slot="{errors, dirty, validated, valid}"
+          >
           <b-form-group label="Name">
-            <b-form-input type="text" v-model="fields.name"></b-form-input>
-          </b-form-group>
-          <b-form-group label="Pseudonym">
-            <b-form-input type="text" v-model="fields.pseudonym"></b-form-input>
-          </b-form-group>
-          <b-form-group label="Pronouns">
-            <b-form-input type="text" v-model="fields.pronouns"></b-form-input>
-          </b-form-group>
-          <b-form-group>
-            <b-form-checkbox switch v-model="fields.willing_to_moderate" @change="log($event)">Willing to moderate session</b-form-checkbox>
+            <b-form-input 
+              type="text" 
+              v-model="fields.name" 
+              aria-describedby="name-invalid-feedback"
+              :state="dirty || validated ? valid ? null : false : null"
+              required
+            ></b-form-input>
+            <b-form-invalid-feedback id="name-invalid-feedback">{{errors[0]}}</b-form-invalid-feedback>
           </b-form-group>
+          </validation-provider>
+          <validation-provider name="Pseudonym">
+            <b-form-group label="Pseudonym">
+              <b-form-input type="text" v-model="fields.pseudonym"></b-form-input>
+            </b-form-group>
+          </validation-provider>
+          <validation-provider name="Pronouns">
+            <b-form-group label="Pronouns">
+              <b-form-input type="text" v-model="fields.pronouns"></b-form-input>
+            </b-form-group>
+          </validation-provider>
+          <validation-provider name="Willing to moderate">
+            <b-form-group>
+              <b-form-checkbox switch v-model="fields.willing_to_moderate">Willing to moderate session</b-form-checkbox>
+            </b-form-group>
+          </validation-provider>
         </template>
       </person-edit-modal>
     </div>
@@ -47,6 +66,7 @@ import { personEndpoints, personModel } from '@/store/person.store';
 import {PERSON_NEVER_LOGGED_IN} from "@/constants/strings";
 import { toastMixin, personSessionMixin } from '@/mixins';
 import { airmeetMixin } from '@/integrations/airmeet.mixin';
+import {ValidationProvider} from 'vee-validate';
 
 export default {
   name: "PersonSummary",
@@ -59,6 +79,7 @@ export default {
   components: {
     EditButton,
     PersonEditModal,
+    ValidationProvider,
   },
   data: () => ({
     editData: {
diff --git a/app/javascript/social-media/simple-social.vue b/app/javascript/social-media/simple-social.vue
index 68443cb9e..cf169add8 100644
--- a/app/javascript/social-media/simple-social.vue
+++ b/app/javascript/social-media/simple-social.vue
@@ -1,35 +1,43 @@
 <template>
-  <b-form-group
-    :label="label"
-    :label-for="id"
-    :id="groupId"
-    class="mt-2"
+  <validation-provider
+    :rules="rules"
+    :name="label"
+    v-slot="{errors, dirty, validated, valid, classes}"
   >
-    <b-input-group>
-      <template #prepend v-if="prepend || $slots.prepend">
-        <slot name="prepend">
-          <b-input-group-text>{{prepend}}</b-input-group-text>
-        </slot>
-      </template>
-      <b-form-input
-        type="text"
-        @blur="onBlur"
-        :value="value"
-        :disabled="disabled"
-        :state="state"
-      ></b-form-input>
-    </b-input-group>
-  </b-form-group>
+    <b-form-group
+      :label="label"
+      :label-for="id"
+      :id="groupId"
+      class="mt-2"
+    >
+      <b-input-group :class="classes">
+        <template #prepend v-if="prepend || $slots.prepend">
+          <slot name="prepend">
+            <b-input-group-text>{{prepend}}</b-input-group-text>
+          </slot>
+        </template>
+        <b-form-input
+          type="text"
+          v-on="$listeners" 
+          :name="label"
+          :value="value"
+          :disabled="disabled"
+          :state="rules ? (dirty || validated ? valid ? null : false : null ) : null"
+          :aria-describedby="feedbackId"
+        ></b-form-input>
+      </b-input-group>
+      <b-form-invalid-feedback :id="feedbackId">{{errors[0]}}</b-form-invalid-feedback>
+    </b-form-group>
+  </validation-provider>
 </template>
 
 <script>
+
+import { ValidationProvider } from 'vee-validate';
+
 export default {
   name: "SimpleSocial",
   props: {
-    state: {
-      type: Boolean,
-      default: null
-    },
     disabled: {
       type: Boolean,
       default: false
@@ -47,20 +55,25 @@ export default {
     },
     id: {
       type: String,
-      required: false
+      required: false,
+      default: 'social-id'
+    },
+    rules: {
+      type: Object,
+      required: false,
     }
   },
+  components: {
+    ValidationProvider
+  },
   computed: {
     groupId() {
       return `${this.id}-group`;
+    },
+    feedbackId() {
+      return `${this.id}-feedback`;
     }
   },
-  methods: {
-    onBlur(e) {
-      this.$emit('input', e.target.value)
-      this.$emit('blur', e.target.value)
-    }
-  }
 }
 </script>