Error While Calling Method

Question

I have written a code for validating the email address. when i click on validation email button it is showing the error like below:

This page has an error. You might just need to refresh it. Unable to find action 'ValidateEmail' on the controller of c:EmailValidation Failing descriptor: {c:EmailValidation}

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <div class="slds-m-around--xx-large">
        <div class="slds-form--stacked">
            <div class="slds-form-element">  
                <div class="slds-form-element__control">
                    <ui:inputText aura:id="txtEmail" label="Email"  placeholder="Email-Address" class="slds-input"/>
                </div>
            </div>            
            <lightning:button variant="success" label="Validate Email" title="Validate Email" onclick="{!c.ValidateEmail}"/>                       
        </div>
    </div>  
</aura:component>

Controller:

({
    ValidateEmail : function(component, event, helper) {  
        var emailField = component.find("txtEmail");
        var emailFieldValue = emailField.get("v.value");
        var regExpEmailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  
        
        if(!$A.util.isEmpty(emailFieldValue)){   
            if(emailFieldValue.match(regExpEmailformat)){
                emailField.set("v.errors", [{message: null}]);
                $A.util.removeClass(emailField, 'slds-has-error');                
            }else{
                $A.util.addClass(emailField, 'slds-has-error');
                emailField.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);               
            }
        } 
    },
})

Answer 1

I copy-pasted your code verbatim into a Lightning App, and it works correctly. If I had to guess, your component doesn't have the latest version of your code, so try deploying again.

Some notes:

• ui:* elements are deprecated, you should use lightning:* elements instead.
• -- BEM style CSS selectors are deprecated (in fact, appear to have been removed), you should be using _ instead.
• Regular Expression email validation is not recommended. Just use lightning:input type="email" instead.
• You don't need to use SLDS styles with the new component, they come with SLDS automatically.

---

<div class="slds-m-around_xx-large">
    <div class="slds-form_stacked">
        <lightning:input aura:id="txtEmail" type="email" label="Email"  placeholder="Email-Address" />
    </div>
    <lightning:button variant="success" label="Validate Email" title="Validate Email" onclick="{!c.ValidateEmail}"/>
</div>