Squash Logs – Client Side Validations

Posted in UI, Web Tagged , ,

For Squash Logs, validations need to be implemented at run-time, so that it is very easy for the player to enter his log data, after each game he plays. We designed the form, so that it was extremely simple for end user to update it.

The below client validations are implemented :

(*) Save button is hidden till all mandatory data is entered.

(*) Date control is shown. Future date cannot be selected for match logs. Date displayed is as per the format required.

(*) Total Score cannot exceed 5. Hence if any one opponent, enters a score of 3, the other opponent can only enter a score of 0,1 or 2.

score_1

My Score is 3, So Opponent Score can be only 0,1 or 2. Drop-down updated accordingly.

 

score_2

My Score is less than 3, So Opponent Score can be only 0,1, 2 or 3. Drop-down updated accordingly.

 

score_4

Opponent Score is 3, So My Score will be less than 3. Drop-down updated accordingly.

 

Opponent Score is less than 3, So My Score can be 3. Drop-down updated accordingly.

Opponent Score is less than 3, So My Score can be 3. Drop-down updated accordingly.

(*) If Scoring System is Selected as “HiHo”, then Games To are always set to 9. If Scoring System is Selected as “PAR”, then Games To, can be selected as either 11 or 15.

HiHo system, will always have 9 games. So no need to select anything here.

HiHo system, will always have 9 games. So no need to select anything here.

PAR System, can have 11 or 15 games. Player will select accordingly.

PAR System, can have 11 or 15 games. Player will select accordingly.

(*) Notes cannot exceed 500 characters. Number of pending characters are shown during typing.

Characters restricted to 500.

Characters restricted to 500.

(*) Weight Must be Positive number.

weight

 

(*) All users Locations are detected and loaded in the drop-down box.

location_3

(*) Any Location can be selected from all the Location created. In the select box, we have an option as “New Location”. If this is selected, then an input box is shown to enter the location name. This is mandatory only if “New Location” is selected from drop-down. Save logic is implemented accordingly.

location_2
(*) Either entering a new location, or selecting one is mandatory.

location_1

(*) All users Opponents are detected and loaded in the select box.

opponent_3

(*) Any Opponent can be selected from all the Opponents created. In the select box, we have an option as “New Opponent”. If this is selected, then an input box is shown to enter the opponent name. This is mandatory only if “New Opponent” is selected from drop-down. Save logic is implemented accordingly.

opponent_2

(*) Either entering a new opponent, or selecting one is mandatory.

opponent_1

(*) The users last entered details are retrieved via cookie and are auto-filled next time. He does not have to re-enter his common details again. If user is accessing the dashboard, from different systems, then the last entered details are fetched from the server. This way even without a cookie, he does get his details auto-filled in.

The same validations were implemented on server side, to ensure no one can push through any irrelevant data.

You can read more about this project here.