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
Mohammed Irfan MayanMohammed Irfan Mayan 

How to achieve Text Change or Selection Change validations in lighting (Not lightning components, but within the default New, & Edit Screen and also in Visual Flows)

The validations has to occur soon after we tabout from the respective field and not when we hit the Save, Update or Next button at the last.
Best Answer chosen by Mohammed Irfan Mayan
Mohammed Irfan MayanMohammed Irfan Mayan
Sure. The below snipet demonstrates a very basic approach on how to achieve the same (but, much to refactor). I'm validating just the Email, date and requried fields for the time being:
  
$(function(){
                    
                    var arrEmailFieldIds=['Email'];// push all email field ids here
                    var arrDOBFieldIds=['DOB'];// push all DOB field ids here
                    
                    var formId;
                    var currentControlId;
                    var currentControlName;
                    var currentInput;

                    $('input').focusout(function() {
                        
                        formId=$(this).closest("form").attr('id');                        
                        currentControlId=$(this).attr('id');
                        currentControlName=$(this).attr('name');                        
                        currentInput=$('[id="'+currentControlId+'"]').val();
                        
                        if(($(this).parent().hasClass('requiredInput')) && ($(this).val()=='')){
                            $('.validation-messagge').html('This field is required');
                            $(this).focus();
                        }else{
                            $('.validation-messagge').html('');
                        }
                        
                        if(currentControlName.indexOf('Email')>0){ //hard coded. need to fetch values from arrEmailFieldIds instead
                            var isEmailValid=isEmail(currentInput); //call a javascript funciton to validate email
                        
                            if(!isEmailValid){
                                $('.validation-messagge').html('Please enter a valid email Id');
                                $(this).focus();
                            }
                            else{
                                $('.validation-messagge').html('');
                            }
                        }    
                        
                        if(currentControlName.indexOf('DOB')>0){ //hard coded. need to fetch values from arrDOBFieldIds instead
                            if(!isDate(currentInput)){
                                $('.validation-messagge').html('Please enter a valid date');
                                $(this).focus();
                            }else{
                                $('.validation-messagge').html('');
                            }
                           
                        }
                    });
               });

 

All Answers

Gaurav HandooGaurav Handoo

Hi Irfan

Not exactly a validation on tabout, but you can restrict people from entering wrong details. For example, you can create a number field on screen and that would not allow alphabets to be entered at all while accepting the inputs.

Hope this meets your requirement.

Cheers!!

Gaurav
Mohammed Irfan MayanMohammed Irfan Mayan
Thanks Gaurav! This helped me partially. To meet my exact requirements I had to go with jQuery by loading the visual flow from a visualforce page and then accessing the controls from script on the fly. 
Gaurav HandooGaurav Handoo

Hi Mohammed

Could you share the snipet of JQuery that you used to achieve the same.

Cheers!!

Gaurav
Mohammed Irfan MayanMohammed Irfan Mayan
Sure. The below snipet demonstrates a very basic approach on how to achieve the same (but, much to refactor). I'm validating just the Email, date and requried fields for the time being:
  
$(function(){
                    
                    var arrEmailFieldIds=['Email'];// push all email field ids here
                    var arrDOBFieldIds=['DOB'];// push all DOB field ids here
                    
                    var formId;
                    var currentControlId;
                    var currentControlName;
                    var currentInput;

                    $('input').focusout(function() {
                        
                        formId=$(this).closest("form").attr('id');                        
                        currentControlId=$(this).attr('id');
                        currentControlName=$(this).attr('name');                        
                        currentInput=$('[id="'+currentControlId+'"]').val();
                        
                        if(($(this).parent().hasClass('requiredInput')) && ($(this).val()=='')){
                            $('.validation-messagge').html('This field is required');
                            $(this).focus();
                        }else{
                            $('.validation-messagge').html('');
                        }
                        
                        if(currentControlName.indexOf('Email')>0){ //hard coded. need to fetch values from arrEmailFieldIds instead
                            var isEmailValid=isEmail(currentInput); //call a javascript funciton to validate email
                        
                            if(!isEmailValid){
                                $('.validation-messagge').html('Please enter a valid email Id');
                                $(this).focus();
                            }
                            else{
                                $('.validation-messagge').html('');
                            }
                        }    
                        
                        if(currentControlName.indexOf('DOB')>0){ //hard coded. need to fetch values from arrDOBFieldIds instead
                            if(!isDate(currentInput)){
                                $('.validation-messagge').html('Please enter a valid date');
                                $(this).focus();
                            }else{
                                $('.validation-messagge').html('');
                            }
                           
                        }
                    });
               });

 
This was selected as the best answer