+ Start a Discussion
Niraj Singh 28Niraj Singh 28 

button should not call action when validation error occurred in Lightning

Here I have written code for lightning component. I have needed that when error occures then button should not call action 

<aura:component controller="ContactsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="conInfo" type="contact" default="{'sobjectType':'contact','LastName':'','firstName':''}"/>
    <!-- CREATE NEW Contact -->
    <div aria-labelledby="newconform" style="display:flex;justify-content:center;">
        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default" style="width:40%;">
        
            
            <form class="slds-form--stacked">          
                <lightning:input  aura:id="conform" label="First Name"
                                 name="VSMfname"
                                 value="{!v.conInfo.firstName}"
                                 messageWhenValueMissing="First Name is Required."
                                 required="true"/> 
                <lightning:input aura:id="conform" label="Last Name"
                                 name="VSMlname"                            
                                 value="{!v.conInfo.lastName}"
                                 messageWhenValueMissing="Last Name is Required."
                                 required="true"/>
                <lightning:input aura:id="conform" label="Email"
                                 name="VSMemail"                            
                                 value="{!v.conInfo.email}"
                                 messageWhenValueMissing="Email is Required."
                                 required="true"/>
                  <lightning:input aura:id="conform" label="Phone"
                                 name="VSMphone"                            
                                 value="{!v.conInfo.phone}"
                                 messageWhenValueMissing="Phone is Required."  
                                 required="true"/>
                   <lightning:input aura:id="conform" label="Street"
                                 name="VSMstreet"                            
                                 value="{!v.conInfo.MailingStreet}"
                                 messageWhenValueMissing="Street is Required."    
                                 required="true"/>
                   <lightning:input aura:id="conform" label="City"
                                 name="VSMcity"                            
                                 value="{!v.conInfo.MailingCity}"
                                 messageWhenValueMissing="City is Required."    
                                 required="true"/>
                 <lightning:input aura:id="conform" label="State"
                                 name="VSMstate"                            
                                 value="{!v.conInfo.MailingState}"
                                 messageWhenValueMissing="State is Required."  
                                 required="true"/>
                        <lightning:input aura:id="conform" label="Country"
                                 name="VSMcountry"                            
                                 value="{!v.conInfo.MailingCountry}"
                                 messageWhenValueMissing="Country is Required."         
                                 required="true"/>
                <lightning:button label="Next" 
                                  class="slds-m-top--medium"
                                  variant="brand"
                                  onclick="{!c.clickCreate}"/>
            </form>
            <!-- / CREATE Contact -->
            
        </fieldset>
        <!-- / BOXED AREA -->
    </div>
    
    
</aura:component>
Best Answer chosen by Niraj Singh 28
Syed Insha Jawaid 2Syed Insha Jawaid 2
Hi Niraj

For this you can create a validate method that would return true/false depending upon the inputs.
For in case the validation method returns false the break your action by return else proceed to call the method that calls the server method.

For instance:
clickCreate:function(component,event,helper) {

if(!helper.validateData())
 return;

helper.insertRecord(component);

}

Cheers!!!
 

All Answers

Syed Insha Jawaid 2Syed Insha Jawaid 2
Hi Niraj

For this you can create a validate method that would return true/false depending upon the inputs.
For in case the validation method returns false the break your action by return else proceed to call the method that calls the server method.

For instance:
clickCreate:function(component,event,helper) {

if(!helper.validateData())
 return;

helper.insertRecord(component);

}

Cheers!!!
 
This was selected as the best answer
Niraj Singh 28Niraj Singh 28
Syed Insha Jawaid 2

Please guid me how can i use email validation and phone validation at given
 <lightning:input aura:id="VSMemail" label="Email"
                                 name="VSMemail"                            
                                 value="{!v.conInfo.email}"
                                 messageWhenValueMissing="Email is Required."
                                 required="true"/>
                  <lightning:input aura:id="VSMphone" label="Phone"
                                 name="VSMphone"                            
                                 value="{!v.conInfo.phone}"
                                 messageWhenValueMissing="Phone is Required."  
                                 required="true"/>
Syed Insha Jawaid 2Syed Insha Jawaid 2
Hi Niraj

Use these two methods to validate them: 

validateEmail: function(mail) { 
        return (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(mail));
    },

    validateContact: function(contactNumber) {
        // return (/^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[789]\d{9}|(\d[ -]?){10}\d$/.test(contactNumber));
        return !!Number(contactNumber) && contactNumber.length >= 10;
    },

Cheers!!!!