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
Vinay_guptaVinay_gupta 

Showing custom validation rules on lightning component

Hi All,
Urgent Help needed!!

I need some suggestion to use the custom validation rules in a lightning component. I want to show the error message which validation rule has fired.
It will be good if you can help me details steps to achieve this.

Regards,
Vinay

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Vinay,

I trust you are doing very well.

Below is the sample code. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >	
    <lightning:input aura:id="tel" type="tel" label="Telephone"
                     name="tel"  pattern="^[0-9_ ]*$" maxlength="11"
                     messageWhenPatternMismatch="Phone number is not valid"
                     onblur='{!c.checkValidity}'
                     /> 
</aura:component>

Controller: 
({
    checkValidity : function(component, event, helper) {
        var validity = event.getSource().get("v.validity");
        console.log(validity)
    }
})

Also, please refer to the below links which might help you further with the above requirement.

https://salesforce.stackexchange.com/questions/160160/show-custom-error-on-lightninginput

http://salesforcehelpblog.blogspot.com/2017/10/working-with-custom-validations-using.html

https://sfdcstop.blogspot.com/2018/03/salesforce-lightning-tutorial-part-5.html

https://www.biswajeetsamal.com/blog/custom-validation-for-lightning-field-value-in-lightning/

http://www.biswajeetsamal.com/blog/tag/validation-rule/


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
Vinay_guptaVinay_gupta
Hi Khan,

I have custom Validation rules that are already in the system which should fire automatically. Here I don't want to create a client-side validation. I want to use the existing one to populate the relevant error message.

I'll give you the example when we use the classic version we get the validation error at the top but when I am using the lightning version, I am unable to see the error message.

Hence I want to show the relevant error message on the lighting component.

Regards,
Vinay
Khan AnasKhan Anas (Salesforce Developers) 
Hi Vinay,

The validation rule will only work once the data has been passed to the server, in the apex. From the server controller side when a user tries to save any record which is against the validation rule, there will be the exception. So, you can handle that error in the try-catch block. There is no way for server-side validation to run in the client-side lightning component. You'll have to create the same logic in the javascript controller of the component.

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas
Vinay_guptaVinay_gupta

Hi Khan,

I am worried about writing so many custom validation rule in a controller. Since I have lots of validation rules in the system. 

 

Can you please suggest me any simplest way to leverage the custom validation rule and pop up the same error message on the lightning component?

Regards,
Vinay
Ajay K DubediAjay K Dubedi
Hi Vinay,

Below Sample Code can fulfill your requirements. Hope this will work for you.


Component:

<aura:component >
 <ui:inputNumber label="Contract No " aura:Id="contractNo" blur="{!c.validateContractNo}"/>
</aura:component>

Controller:

({
 validateContractNo : function(component, event, helper) {
  var inputCmp = component.find("contractNo");
  var value = inputCmp.get("v.value");
        
        if ( value.length < 8 || value.length > 12 || isNaN(value) ) {
            inputCmp.set("v.errors", [{message:"Invalid Contract No: " + value}]);
        } else {
         inputCmp.set("v.errors", null);
        }
 }
})


Please mark this as best answer if this solves your problem.

Thank you
Ajay Dubedi