cancel
Showing results for 
Search instead for 
Did you mean: 
cancel

ISE Guest Self-Registration form working with phone numbers

3401
Views
23
Helpful
1
Comments

 

The following page we are documenting how to work with phone numbers on the Guest Registration Form for the Self-Registration Portal

 

For more information on working with javascript check out this document and watch the video sample

How To: ISE Web Portal Customization Options

This video shows you in an example on the sponsor portal page

 

Use the same concept for all of these examples:

  1. This script is entered under Work Centers > Guest Access > Portal & Components > Guest Portals > Self-Registration Portal
  2. Navigate to Portal Page Customization and the Registration Form.
  3. Under Optional Content 2, Toggle into HTML, paste the script and then toggle out.

 

Validate Phone Number as 10 digits and change to numeric keyboard

 

The following script allows you to validate the phone number entered in the guest self-registration form when creating a new account. It also changes ‘Phone number’ input format from ‘text’ to ‘number’ to have numeric keyboard pop up on mobile devices.

 

<script>

(function(){

jQuery(document).ready(function() {

    jQuery("#guestUser\\.fieldValues\\.ui_phone_number").attr("placeholder", "1234567890");

    jQuery("#guestUser\\.fieldValues\\.ui_phone_number").attr("type", "number");

        setTimeout(function(){

            cisco.ise.validation.setPhoneRegex (/^[0-9]{10}$/);

            cisco.ise.validation.setPhoneNumberMessage("Please provide your phone number in format XXXXXXXXXX");

        }, 100);

    });

})

();

</script>

 

Pictures of devices before number pad script

android (withoutscript).png  iphone(withoutscript).png

Pictures After, notice the number pad is showing by default

 

android (withscript).pngiphone(withscript).png

 

This script validates the length

You can change orange string on your length of digits. For example: "5" , "9" , "7"

 

<script>

     $.validator.addMethod("phoneNumber", function(value, element) {

       return /^[0-9]{10}$/.test( value );

     }, 'Incorrect length of the phone number.');

  

     jQuery("[name='guestUser.fieldValues.ui_phone_number']").rules("add",{phoneNumber:true, phone:false});

</script>

 

 

Check that numbers starts with a 4 for Australian mobile number

Requirement from customer

Do we have a feature where ISE can perform a sanity check against the entered mobile number to ensure it starts with '04...' which is an Australian mobile number and rejects the landline number or show the message to the end-user, please type the mobile number instead of landline number.

 

For Example:

Some (dumb) users are entering their landline number instead of their mobile number.

Is there a way in ISE to perform a sanity check against the entered mobile number to ensure it starts with '04...' which is an Australian mobile number?

 

<script>

(function(){

jQuery(document).ready(function() {

setTimeout(function(){

cisco.ise.validation.setPhoneRegex(/^05[0-9]{8}$/);

cisco.ise.validation.setPhoneNumberMessage("Please provide your phone number in format 05XXXXXXXX");

}, 100);

});

})();

</script>

self-reg-phone.png

 

Provide a placeholder to show the user an example on how to enter their number

 

<script>

jQuery('#ui_phone_number_label').attr("placeholder", "+41798764321”);

</script>

 

phone-placeholder-guest.png

 

Change phone number from starting with 8 and replace with 7

Customer USE

 

Russian international country code is +7 , our provider expects from us the format '7XXXXXXXXXX' of the phone number.

However, inside the country the format 8XXXXXXXXXX is commonly used to make calls and for most of users it's not comfortable to input their phone in 7XXXXXXXXXX format.

We want to create a handy portal and fit provider's API.

Do we have any possibility to change the phone number variable before send it to SMS gateway?

For example, we have to ask end users to input their phone number in format 8XXXXXXXXXX, but our SMS provider expects from us phone number in format 7XXXXXXXXXX.

So we have to change the first number in the phone number variable '8' -> '7' or just cut out '8' and add '7' into the POST configuration of the SMS provider.

It doesn't really matter which format will be in our reports.

 

<script>

$('[id="ui_self_reg_submit_button"]').on('click', function(evt){

    cisco.ise.validation.setPhoneRegex();

    cisco.ise.validation.setPhoneNumberMessage();

    var phoneInput = $('#guestUser\\.fieldValues\\.ui_phone_number');

    var phoneNumber = phoneInput.val();

    var regPhone = new RegExp(/^8[0-9]{10}$/)

    if (regPhone.test(phoneNumber)) {

      var regexped = phoneNumber.replace(/^8/, '7');

      phoneInput.val(regexped);

    }else {

      cisco.ise.validation.setPhoneRegex(/^8[0-9]{10}$/);

      cisco.ise.validation.setPhoneNumberMessage("Please provide your phone number in format 8XXXXXXXXXX");

    }

  });  

</script>

International Phone Number Pull down

Releases prior to 2.7

This allows the user to choose their country code so they don't mess up entering it. Its required to be running ISE 2.2+ and has been recently validated with 2.4

 

 

There are a few pieces to this.

  • Upload to Custom portal files (Work Centers > Guest Access > Custom Portal Files)
    • image files used for the pull down 
    • javascript .js file
  • copy/paste text file script into Self registration > Portal page customization > Registration Form > Optional Content 2

Also attached in zip is the Country’s list with code number and abbreviation from where customer can choose their country and set the corresponding abbreviation in the preferredCountries which is highlighted in the below script. They can add ‘n’ number of countries in the list by having “,” separated within the square brackets.

<script>

    setTimeout(function() { 
        var parent = $("input[data-real-input='guestUser.fieldValues.ui_phone_number']").parent();
        parent[0].setAttribute("style", "overflow : visible;");
        var inputText = $("input[data-real-input='guestUser.fieldValues.ui_phone_number']")[0];
        window.intlTelInput(inputText, {                 
            nationalMode: false, 
            preventInvalidDialCodes: true,
             preferredCountries: [ "be", “us” ]
        });
   }, 1000); 
  </script>

 

See "script-internationalphone2.zip" with script, country list, required js and image files. Script is provided separately for portals created from ISE(script.txt) as well as portals created from ISE portal builder(Script_ISEPB.txt). The country listing is just a reference file and is not to be uploaded or part of ISE script configurations

 

InternationalCode.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ISE 2.7

This is built into ISE 2.7 but has different operation. If you have issues with how this works in the new release please open a tac case if it has broken prior functionality.

Try this script for changing the priority in 2.7 (using above information to tweak where necessary).

Please try the below script in the Optional Content 2 of Registration Form page to display the Russian country code by default.

 

<script>   
    setTimeout(function() {
        if($('.flag-container') != null){
            var phoneField = $("input[name='guestUser.fieldValues.ui_phone_number']");
            phoneField.parent().after(phoneField);
            $('.intl-tel-input.allow-dropdown').remove();
        }
        var inputText = $("input[name='guestUser.fieldValues.ui_phone_number']")[0];
        window.intlTelInput(inputText, {                 
            nationalMode: false, 
            preventInvalidDialCodes: true,
            preferredCountries: [ "ru" ]
        });
        $("input[name='guestUser.fieldValues.ui_phone_number']")[0].value = "+7";
   }, 2000);
  </script>
Comments
Beginner

Very useful and nice. Cisco should incorporate this into the product.

CreatePlease to create content
Content for Community-Ad
FusionCharts will render here