function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ramk123Ramk123 

SSN formatting in Lightning page

I have a requirement to automate SSN structure.
example:
user input SSN: 123456789
automate output SSN format: 123-45-6789
with my below logic am not able to achieve the scenario, anyone please help.
Component:
<lightning:input aura:id="SSN__c" name="SSN" 
           label="SSN" 
           maxlength="9" onblur="{!c.formatSSN}"                                          
           value="{!v.newCallerModel.Ssn}" />  
JS Controller 
formatSSN: function(component, helper, event)  {   
     var patt = new RegExp("\d{3}[\-]\d{2}[\-]\d{4}");
     var x = document.getElementById("SSN__c");
     var res = patt.test(x.value);
        if(!res){
            x.value = x.value
            .match(/\d*/g).join('')
            .match(/(\d{0,3})(\d{0,2})(\d{0,4})/).slice(1).join('-')
            .replace(/-*$/g, '');
        }
    },  
Best Answer chosen by Ramk123
Raj VakatiRaj Vakati
Here is the code to update it SSN format to 123-45-6789 
({
    formatSSN: function(component, helper, event)  {  
        var validity = component.find("ssssssssss").get("v.value");
        console.log('-----------'+validity)
        var val = validity.replace(/\D/g, '');
        var sizes = [3, 2, 4];
        var newVal = '';
        
        for (var i in sizes) {
            if (val.length > sizes[i]) {
                newVal += val.substr(0, sizes[i]) + '-';
                val = val.substr(sizes[i]);
            }
        }
        newVal += val;
        console.log('newVal--'+newVal);
        
        component.set("v.ssn" ,newVal );
    },  
})

 

 

All Answers

Raj VakatiRaj Vakati
Hi ,

Here is the code you can use ...   
<aura:attribute name ="ssn" type="String" default="999999999"/>
	<lightning:input aura:id="ssssssssss" name="SSN" 
           label="SSN" 
           maxlength="9" onblur="{!c.formatSSN}"                                          
           value="{!v.ssn}" />

Controller code  
formatSSN: function(component, helper, event)  {  
        var validity = component.find("ssssssssss").get("v.value");
        console.log('-----------'+validity)
        var val = validity.replace(/\D/g, '');
        var newVal = '';
        while (val.length > 3) {
            newVal += val.substr(0, 3) + '-';
            val = val.substr(3);
        }
        newVal += val;
        console.log('newVal--'+newVal);
        // this.value = newVal;
        component.set("v.ssn" ,newVal );
    },




 
Ramk123Ramk123
Hi Raj,

Thanks for your response!

The above logic working fine, but my expected SSN format is 123-45-6789 with the input 123456789.

Appreciate your response in advance.
Raj VakatiRaj Vakati
Here is the code to update it SSN format to 123-45-6789 
({
    formatSSN: function(component, helper, event)  {  
        var validity = component.find("ssssssssss").get("v.value");
        console.log('-----------'+validity)
        var val = validity.replace(/\D/g, '');
        var sizes = [3, 2, 4];
        var newVal = '';
        
        for (var i in sizes) {
            if (val.length > sizes[i]) {
                newVal += val.substr(0, sizes[i]) + '-';
                val = val.substr(sizes[i]);
            }
        }
        newVal += val;
        console.log('newVal--'+newVal);
        
        component.set("v.ssn" ,newVal );
    },  
})

 

 
This was selected as the best answer
Vijay Kumar YadavVijay Kumar Yadav
I want that after submitting the case social security number must be display in a asteric pattern. If upper level role can give permission to lower level role than only ssn willl be displayed