UI-3175: Require user type on user creation, if field is displayed (#97)

* Add validation for licensedRole at user creation dialog * Add validation for role only if needed * Force select element validation on change event
2600hz · Nov 5, 2018 · 804dd12 · 804dd12
1 parent 8e8eb8c
commit 804dd12
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 32 deletions.
diff --git a/submodules/users/users.js b/submodules/users/users.js
@@ -703,35 +703,55 @@ define(function(require) {
 							name: 'creation',
 							data: originalData,
 							submodule: 'users'
-						}));
+						})),
+						userCreationForm = userTemplate.find('#form_user_creation'),
+						validationOptions = {
+							ignore: ':hidden:not(select)',
+							rules: {
+								'callflow.extension': {
+									checkList: originalData.listExtensions
+								},
+								'vmbox.number': {
+									checkList: originalData.listVMBoxes
+								},
+								'user.password': {
+									minlength: 6
+								}
+							},
+							messages: {
+								'user.first_name': {
+									required: self.i18n.active().validation.required
+								},
+								'user.last_name': {
+									required: self.i18n.active().validation.required
+								},
+								'callflow.extension': {
+									required: self.i18n.active().validation.required
+								}
+							}
+						};
+
+					if (originalData.licensedUserRoles) {
+						validationOptions.rules['user.extra.licensedRole'] = {
+							checkList: [ 'none' ]
+						};
+						validationOptions.messages['user.extra.licensedRole'] = {
+							checkList: self.i18n.active().validation.required
+						};
+					}
 
 					monster.ui.mask(userTemplate.find('#extension'), 'extension');
 
 					monster.ui.chosen(userTemplate.find('#licensed_role'));
 
-					monster.ui.validate(userTemplate.find('#form_user_creation'), {
-						rules: {
-							'callflow.extension': {
-								checkList: originalData.listExtensions
-							},
-							'vmbox.number': {
-								checkList: originalData.listVMBoxes
-							},
-							'user.password': {
-								minlength: 6
-							}
-						},
-						messages: {
-							'user.first_name': {
-								required: self.i18n.active().validation.required
-							},
-							'user.last_name': {
-								required: self.i18n.active().validation.required
-							},
-							'callflow.extension': {
-								required: self.i18n.active().validation.required
-							}
-						}
+					monster.ui.validate(userCreationForm, validationOptions);
+
+					// Force select element validation on change event
+					// (Not handled by jQuery Validation plugin because the select
+					// element is hidden by the Chosen jQuery plugin. For more info, see:
+					// https://github.com/jquery-validation/jquery-validation/issues/997)
+					userCreationForm.find('select').on('change', function() {
+						userCreationForm.validate().element(this);
 					});
 
 					monster.ui.showPasswordStrength(userTemplate.find('#password'));

diff --git a/submodules/users/users.scss b/submodules/users/users.scss
@@ -623,16 +623,22 @@
 	margin-left: 30px;
 }
 
-#creation_user_dialog label.monster-invalid[for="user.last_name"] {
-	margin-left: 113px;
-}
+#creation_user_dialog label.monster-invalid{
+	&[for="user.last_name"] {
+		margin-left: 113px;
+	}
 
-#creation_user_dialog label.monster-invalid[for="extension"] {
-	margin-left: 160px;
-}
+	&[for="extension"] {
+		margin-left: 160px;
+	}
 
-#creation_user_dialog label.monster-invalid[for="password"] {
-	margin-top: 25px;
+	&[for="password"] {
+		margin-top: 25px;
+	}
+
+	&[for="licensed_role"] {
+		margin-top: 30px;
+	}
 }
 
 #creation_user_dialog .control-group.hack-left .control-label{