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
shifali sharma 11shifali sharma 11 

lightening component validation

hi ,
I want to set ui:input for phone Number i want user can enter 10 digits not more not less than it and it will display error when user fail to do so
<ui:inputText class="slds-input inputFieldWidth"
                                                                  labelClass="slds-form-element__label slds-form-element__label_edit slds-no-flex"
                                                                  aura:id="inputId5"
                                                                  required="true"
                                                                  value="{!(v.relateddatalist.OpptyContact[0].Contact.Phone)}"/>
Matrix ReturnsMatrix Returns
You can use JavaScript Controller to validate it during save .
bhanu_prakashbhanu_prakash
Hi Shifali, 
Mark as best answer, If it resloves !!​​
Component 
<ui:inputNumber label="Phone number " aura:Id="PhoneNumber" blur="{!c.validatePhonenumber}"/>
Controller 
({
 validatePhonenumber : function(component, event, helper) {
  var inputCmp = component.find("PhoneNumber");
  var value = inputCmp.get("v.value");
        
        if ( value.length < 9 || value.length > 11 || isNaN(value) ) {
            inputCmp.set("v.errors", [{message:"Invalid PhoneNumber No: " + value}]);
        } else {
         inputCmp.set("v.errors", null);
        }
 }
})

Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com

 
bhanu_prakashbhanu_prakash
Update Controller
  
({
 validatePhonenumber : function(component, event, helper) {
  var inputCmp = component.find("PhoneNumber");
  var value = inputCmp.get("v.value");
        
        if ( value.length < 10 || value.length > 10 || isNaN(value) ) {
            inputCmp.set("v.errors", [{message:"Invalid PhoneNumber No: " + value}]);
        } else {
         inputCmp.set("v.errors", null);
        }
 }
})