Jump to content
Welcome to our new Citrix community!

Custom Login Schema with Domain Dropdown provide Client-Side Validation?


Recommended Posts

I'm looking for a way to setup some Client-Side Validation like what is done for the Password Fields (to ensure a user enters a value) with the DomainDropdown.xml based Login Schema that I generated for providing a SELECT field for users to select their Domain.  At this point if a user does not select a value the "unspecified" value is selected and I have to detect this and kick the user back to a Retry of the Login Schema Form.

 

I'd like to ensure that if NO value is selected or the "unspecified" value is selected that the user is notified with a message similar to the "You need to enter a password" but instead of course that "You must select a domain option" so it would provide the user some feedback and help them out.  I have a feeling I'll end up needing to edit the script.js in "/var/netscaler/logon/themes/nFactorPortalTheme/" to have something for this, but I feel that would not be the Best-Practices method for doing such a Client-Side Validation check.

 

For more information, I have a number of Login Schema XML templates setup for various Forms where some have the User+Password+Domain, User+Password+Domain+OTP, etc. I really want to try and make this more user friendly but still ensure it disrupts abuse/bots, etc.

Link to comment
Share on other sites

Well, I went ahead and tried something that seems to work well.

 

While using the nFactorPortalTheme I have a customized script.js file located in: /var/netscaler/logon/themes/nFactorPortalTheme/

 

CTXS.ExtensionAPI.addCustomCredentialHandler({

  // Generate HTML for the custom credential
  getCredentialTypeMarkup: function(requirements) {

    $(document).ready(function(){
			
		// Ensure any One-Time-Passcode (OTP) Fields if found are set to be Required.
		$("#passwd1").attr('required', true);
		// Ensure if an One-Time-Passcode (OTP) Field exists that the user enters a value.
		$("#passwd1").on("blur",function(){
			// If OTP was found then ensure it has a value.
			if ($("#passwd1").val() == '') {
				// You must enter an OTP value.
				// $('#genericMessageBoxPopup').focus();
				CTXS.ExtensionAPI.showMessage({localize:!0,messageText:"You must enter an One-Time-Passcode (OTP) value.",messageTitle:"",okButtonText:"OK",isalert:!1,okAction:function(){
					$("#passwd1").focus();
					$("#passwd1").val('');
					$("#passwd1").setSelectionRange(0,0);
				}});
				
			};
		});
		
		// Ensure if a Domain SELECT Field exists that the user selects a valid option.
		$("#domain").on("blur",function(){
			// Check to see if a Domain Selection has not be chosen.
			if ($("#domain").children("option:selected").val() == 'unspecified'){
				// You must select a domain value.
				CTXS.ExtensionAPI.showMessage({localize:!0,messageText:"You must select a Domain value.",messageTitle:"",okButtonText:"OK",isalert:!1,okAction:function(){
					$("#domain").focus();
				}});
			};
		});
    });
	
  }
});

I'm sure there is a better way to do this, but this is what I've found as a method so far. 

 

I'd prefer to find some way to work with Language Localization files, etc.

Edited by Jeffrey Faulstich
I realized I left some of the "Cancel" code I've been working on that does not work.
Link to comment
Share on other sites

While testing I found the JavaScript I had above actually wasn't handling the onBlur and onFocus very well so you could get into some silly loops.

 

Updated code below:

CTXS.ExtensionAPI.addCustomCredentialHandler({

  // Generate HTML for the custom credential
  getCredentialTypeMarkup: function(requirements) {

    $(document).ready(function(){
			
		// Ensure any One-Time-Passcode (OTP) Fields if found are set to be Required.
		$("#passwd1").attr('required', true);
		
		// Ensure if an One-Time-Passcode (OTP) Field exists that the user enters a value.
		$("#passwd1").on("blur",function(){
			// If OTP was found then ensure it has a value.
			if ($("#passwd1").val() == '') {
				// You must enter an OTP value.
				CTXS.ExtensionAPI.showMessage({localize:!0,messageText:"You must enter an One-Time-Passcode (OTP) value.",messageTitle:"",okButtonText:"OK",isalert:!1,okAction:function(){
					$("#passwd1").focus();
					$("#passwd1").val('');
					$("#passwd1").setSelectionRange(0,0);
				}});
				$('#genericMessageBoxPopup').attr('tabindex', 1);
				$('#genericMessageBoxPopup').focus();
			};
		});
		
		// Ensure if a Domain SELECT Field exists that the user selects a valid option.
		$("#domain").on("blur",function(){
			// Check to see if a Domain Selection has not be chosen.
			if ($("#domain").children("option:selected").val() == 'unspecified'){
				// You must select a domain value.
				CTXS.ExtensionAPI.showMessage({localize:!0,messageText:"You must select a Domain value.",messageTitle:"",okButtonText:"OK",isalert:!1,okAction:function(){
					$("#domain").focus();
				}});
				$('#genericMessageBoxPopup').attr('tabindex', 1);
				$('#genericMessageBoxPopup').focus();
			};
		});
    });
	
  }
});

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...