@everymatrix/general-player-register-form-step2 1.1.2 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form-step2",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "main": "dist/general-player-register-form-step2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a331dfb7a0daca971fec89907140c9353dc5f0b3"
+  "gitHead": "8382d5b109b967bd6756236bd96bb5a13d51e40e"
 }

package/src/GeneralPlayerRegisterFormStep2.svelte

@@ -21,6 +21,11 @@
   let invalidBirthDate:boolean = false;
   let invalidBirthPlace:boolean = false;
 
+  let firstNameFocus:boolean = false;
+  let lastNameFocus:boolean = false;
+  let birthDateFocus:boolean = false;
+  let birthplaceFocus:boolean = false;
+
   let disabledFieldsList:Array<string>;
 
   let userTitleSelected:string;
@@ -280,16 +285,16 @@
         <option value="Ms.">{$_('registerFormStep2.registerUserTitleSelectMs')}</option>
       </select>
     </div>
-    <div class="FirstNameContainer {invalidFirstName ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('firstName') >= 0 ? 'Hidden' : ''}" part="FirstNameContainer {invalidFirstName ? 'InvalidField' : ''}">
+    <div class="FirstNameContainer {invalidFirstName && !firstNameFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('firstName') >= 0 ? 'Hidden' : ''}" part="FirstNameContainer {invalidFirstName ? 'InvalidField' : ''}">
       <label for="FirstName">{$_('registerFormStep2.registerFirstName')}:<span class="FormRequired" part="FormRequired">*</span></label>
-      <input bind:value={userFirstName} on:blur={validateUserFirstName} type="text" id="FirstName" />
+      <input bind:value={userFirstName} on:keyup={validateUserFirstName} on:focus={() => firstNameFocus = true} on:keyup={() => firstNameFocus = false} type="text" id="FirstName" />
       {#if invalidFirstName}
         <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep2.registerFirstNameError')}</p>
       {/if}
     </div>
-    <div class="LastNameContainer {invalidLastName ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('lastName') >= 0 ? 'Hidden' : ''}" part="LastNameContainer {invalidLastName ? 'InvalidField' : ''}">
+    <div class="LastNameContainer {invalidLastName && !lastNameFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('lastName') >= 0 ? 'Hidden' : ''}" part="LastNameContainer {invalidLastName ? 'InvalidField' : ''}">
       <label for="LastName">{$_('registerFormStep2.registerLastName')}:<span class="FormRequired" part="FormRequired">*</span></label>
-      <input bind:value={userLastName} on:blur={validateUserLastName} type="text" id="LastName" />
+      <input bind:value={userLastName} on:keyup={validateUserLastName} on:focus={() => lastNameFocus = true} on:blur={() => lastNameFocus = false} type="text" id="LastName" />
       {#if invalidLastName}
         <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep2.registerLastNameError')}</p>
       {/if}
@@ -322,9 +327,9 @@
         {/if}
       </div>
     </div>
-    <div class="BirthPlaceContainer {invalidBirthPlace ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('birthPlace') >= 0 ? 'Hidden' : ''}" part="BirthPlaceContainer {invalidBirthPlace ? 'InvalidField' : ''}">
+    <div class="BirthPlaceContainer {invalidBirthPlace && !birthplaceFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('birthPlace') >= 0 ? 'Hidden' : ''}" part="BirthPlaceContainer {invalidBirthPlace ? 'InvalidField' : ''}">
       <label for="BirthPlace">{$_('registerFormStep2.registerBirthPlace')}:<span class="FormRequired" part="FormRequired">*</span></label>
-      <input bind:value={birthPlace} on:keyup={validateBirthPlace} type="text" id="BirthPlace" />
+      <input bind:value={birthPlace} on:keyup={validateBirthPlace} on:focus={() => birthplaceFocus = true} on:blur={() => birthplaceFocus = false} type="text" id="BirthPlace" />
       {#if invalidBirthPlace}
         <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep2.registerBirthPlaceError')}</p>
       {/if}