You need to sign in to do that
Don't have an account?
Niraj 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>
<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>
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
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!!!
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"/>
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!!!!