Added regex checks for 'Link to Work' and 'Link to Creator Profile'

src/components/AttributionDetailsStep.vue

@@ -22,20 +22,24 @@
       </v-input>
       <v-input
         v-model="workUrl"
+        v-validate="{ url: { require_protocol: true } }"
         :label="$t('stepper.AD.form.work-url.label')"
         :placeholder="$t('stepper.AD.form.work-url.placeholder')"
       />
+      <span v-if="attributionErrorMsg.workUrlError">{{ attributionErrorMsg.workUrlError }}</span>
       <v-input
         v-model="creatorProfileUrl"
         :label="$t('stepper.AD.form.creator-profile.label')"
         :placeholder="$t('stepper.AD.form.creator-profile.placeholder')"
       />
+      <span v-if="attributionErrorMsg.creatorProfileUrlError">{{ attributionErrorMsg.creatorProfileUrlError }}</span>
       <v-input
         v-if="currentLicenseAttributes.BY"
         v-model="yearOfCreation"
         :label="$t('stepper.AD.form.year-of-creation.label')"
         :placeholder="$t('stepper.AD.form.year-of-creation.placeholder')"
       />
+      <span v-if="attributionErrorMsg.yearOfCreationError">{{ attributionErrorMsg.yearOfCreationError }}</span>
     </form>
 
     <app-modal
@@ -58,7 +62,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 library.add(faInfoCircle);
-
+const regexTestString= /[(http(s)?):(www)?a-zA-Z0-9@:%._~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/;
 export default {
   name: 'AttributionDetails',
   components: { VInput, FontAwesomeIcon },
@@ -74,6 +78,7 @@ export default {
   data() {
     return {
       showInfoModal: false,
+      attributionErrorMsg: [],
     };
   },
   computed: {
@@ -119,10 +124,55 @@ export default {
       },
     },
   },
+  watch: {
+    creatorProfileUrl(value){
+      this.attributionDetails.creatorProfileUrl = value;
+      this.validateCreatorProfileUrl(value);
+    },
+    workUrl(value){
+      this.attributionDetails.workUrl = value;
+      this.validateWorkUrl(value);
+    },
+    yearOfCreation(value){
+      this.attributionDetails.yearOfCreation = value;
+      this.validateYearOfCreation(value);
+    },
+  },
   methods: {
     toggleInfoModal() {
       this.showInfoModal = !this.showInfoModal;
     },
+    validateCreatorProfileUrl(value) {
+      if(value.length === 0){
+        this.attributionErrorMsg.creatorProfileUrlError = '';
+      }
+      else if (regexTestString.test(value)) {
+        this.attributionErrorMsg.creatorProfileUrlError = '';
+      } else {
+        this.attributionErrorMsg.creatorProfileUrlError = 'Please enter a valid URL.';
+      }
+    },
+    validateWorkUrl(value) {
+      if(value.length === 0){
+        this.attributionErrorMsg.workUrlError = '';
+      }
+      else if (regexTestString.test(value)) {
+        this.attributionErrorMsg.workUrlError = '';
+      } else {
+        this.attributionErrorMsg.workUrlError = 'Please enter a valid URL.';
+      }
+    },
+    validateYearOfCreation(value){
+      if(value.length === 0){
+        this.attributionErrorMsg.yearOfCreationError = '';
+      }
+      else if(Number(value)>= 1000 && Number(value)<=9999 && !value.includes('.')){
+        this.attributionErrorMsg.yearOfCreationError = '';
+      }
+      else {
+        this.attributionErrorMsg.yearOfCreationError = 'Please enter a valid year';
+      }
+    },
     ...mapMutations([
       'setCreatorName',
       'setCreatorProfileUrl',