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

Mobile number field placeholder customization

423
Views
0
Helpful
0
Comments

 

sivsivar_0-1626703536406.png

 

ISE 2.7 FCS

 

To display default country code and Place holder customization please follow the below steps.

 

  1. Upload the attached js file in Custom Portal Files.
  2. Go to portal and add the below script in the Registration Form page.
  3. Save the portal.
<script src="customFiles/maskedinput.js" type="text/javascript"></script><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,
            autoHideDialCode: false,
            separateDialCode: true,
            preferredCountries: [ "kz" ]
        });
        $("input[name='guestUser.fieldValues.ui_phone_number']").attr("placeholder", "(999) 999 99 99");
        $('[name="guestUser.fieldValues.ui_phone_number"]').mask("(999) 999 99 99");
        $("input[name='guestUser.fieldValues.ui_phone_number']").rules("remove");
        $('form[name="selfRegForm"]').on('submit', function(){
            $('form[name="selfRegForm"]').validate();
            if($('form[name="selfRegForm"]').valid()){                                              
                var phoneNumber = $('[name="guestUser.fieldValues.ui_phone_number"]').val();
                var removedExtraChars = phoneNumber.replace("(","").replace(")","").replace(/ /g,"");
                var dialCode = $('.selected-dial-code').text();
                $('[name="guestUser.fieldValues.ui_phone_number"]').val(dialCode +removedExtraChars);
            }
        });
    }, 1600);
</script>
Content for Community-Ad