You need to sign in to do that
Don't have an account?
Gopal Chat
In my code i want to show or hide None div based on input,if input is blank the div of none will show none,and email validation error
<aura:component implements="force:appHostable" controller="PropertyOnboardingApexController" >
<aura:attribute name="enquiryName" type="String" default="" />
<aura:attribute name="mobileNumber" type="String" default="" />
<aura:attribute name="emailId" type="String" default="" />
<aura:attribute name="companyName" type="String" default="" />
<aura:attribute name="typeOfEnquiry" type="List" default="" />
<aura:attribute name="selectedEnquiry" type="String" default="" />
<aura:attribute name="typeOfProperty" type="List" default="" />
<aura:attribute name="selectedPropertyType" type="String" default="" />
<aura:attribute name="propertyArea" type="String" default="" />
<aura:attribute name="country" type="String" default="" />
<aura:attribute name="city" type="String" default="" />
<aura:attribute name="address" type="String" default="" />
<aura:handler name="init" value="{!this}" action="{!c.onLoad}" />
<!--<lightning:spinner aura:id="mySpinner" variant="brand" size="medium" class="slds-hide"/>-->
<lightning:spinner variant="brand" size="medium" aura:id="Id_spinner" class="slds-hide" />
<lightning:card>
<aura:set attribute="title">
<div class="slds-text-heading_large slds-text-align_center">
<b>Enquiry</b>
</div>
</aura:set>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input1" label="Name" placeholder="Enter Name..." value="{!v.enquiryName}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;" aura:id="containerCollapsable">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input aura:id="mobile" name="input2" label="Mobile Number" maxlength="10" minlength="10" placeholder="Enter Mobile Number..." value="{!v.mobileNumber}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input aura:id="email" name="input3" label="Email Id" placeholder="Enter Email Id..." value="{!v.emailId}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br/>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input4" label="Company Name" placeholder="Enter Company Name..." value="{!v.companyName}"/>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:select name="typeId" label="Select Type" aura:id="typeId" value="{!v.selectedEnquiry}" required="true">
<option text="---Choose Type---" value="0" />
<aura:iteration items="{!v.typeOfEnquiry}" var="option">
<option text="{!option}" value="{!option}"/>
</aura:iteration>
</lightning:select>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:select name="propertyId" label="Select Property Type" aura:id="propertyId" value="{!v.selectedPropertyType}" required="true">
<option text="---Choose Property Type---" value="0" />
<aura:iteration items="{!v.typeOfProperty}" var="option">
<option text="{!option}" value="{!option}" />
</aura:iteration>
</lightning:select>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br/>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input6" label="Property Area" placeholder="Enter Property Area..." value="{!v.propertyArea}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br/>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input7" label="Country" placeholder="Enter Country..." value="{!v.country}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input8" label="City" placeholder="Enter City..." value="{!v.city}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input9" label="Address" placeholder="Enter Address..." value="{!v.address}" />
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<aura:set attribute="footer">
<div class="slds-text-align_center">
<lightning:button variant="brand" label="Save" title="Brand" onclick="{!c.handleClick}" />
</div>
</aura:set>
</lightning:card>
</aura:component>
({
handleClick : function(component, event, helper) {
// var spinner = component.find("mySpinner");
//component.find("Id_spinner").set("v.class" , 'slds-show');
//$A.util.removeClass(spinner,"slds-hide");
var action = component.get("c.handleClickApex");
if(!helper.checkvalidation(component, event)){
action.setParams({
"enquiryName" : component.get('v.enquiryName'),
"mobileNumber" : component.get('v.mobileNumber'),
"emailId" : component.get('v.emailId'),
"companyName" : component.get("v.companyName") ,
"selectedEnquiry" : component.get("v.selectedEnquiry"),
"selectedPropertyType" : component.get("v.selectedPropertyType"),
"propertyArea" : component.get("v.propertyArea"),
"country" : component.get("v.country"),
"city" : component.get("v.city"),
"address" : component.get("v.address")
});
action.setCallback(this,function(response){
// component.find("Id_spinner").set("v.class",'slds-hide');
if(response.getState() === "SUCCESS") {
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": response.getReturnValue()
});
navEvt.fire();
// $A.util.addClass(spinner,"slds-hide");
}
});
$A.enqueueAction(action);
}
},
onLoad : function(component,event,helper) {
// var spinner = component.find("mySpinner");
// $A.util.removeClass(spinner,"slds-hide");
var enquiryType = $A.get("$Label.c.EnquiryType");
component.set("v.typeOfEnquiry",enquiryType.split(":"));
var propertyType = $A.get("$Label.c.PropertyType");
component.set("v.typeOfProperty",propertyType.split(":"));
// $A.util.addClass(spinner,"slds-hide");
}
})
({
checkvalidation : function(component, event) {
var notBlank = false;
if(!component.get('v.enquiryName')){
notBlank = true;
}
else if(!component.get('v.mobileNumber')){
var mobileValue=component.find("mobile").get("v.value");
if(!mobileValue.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/)) {
}
notBlank = true;
}else if(!component.get('v.emailId')){
var emailValue=component.find("email").get("v.value");
if(!emailValue.match(/^(([^<>()\[\]\\.,;:\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,}))$/)){
}
notBlank = true;
}else if(!component.get("v.selectedEnquiry")){
notBlank = true;
}else if(!component.get("v.selectedPropertyType")){
notBlank = true;
}else if(!component.get("v.propertyArea")){
notBlank = true;
}else if(!component.get("v.country")){
notBlank = true;
}else if(!component.get("v.city")){
notBlank = false;
}
return notBlank;
}
})
<aura:attribute name="enquiryName" type="String" default="" />
<aura:attribute name="mobileNumber" type="String" default="" />
<aura:attribute name="emailId" type="String" default="" />
<aura:attribute name="companyName" type="String" default="" />
<aura:attribute name="typeOfEnquiry" type="List" default="" />
<aura:attribute name="selectedEnquiry" type="String" default="" />
<aura:attribute name="typeOfProperty" type="List" default="" />
<aura:attribute name="selectedPropertyType" type="String" default="" />
<aura:attribute name="propertyArea" type="String" default="" />
<aura:attribute name="country" type="String" default="" />
<aura:attribute name="city" type="String" default="" />
<aura:attribute name="address" type="String" default="" />
<aura:handler name="init" value="{!this}" action="{!c.onLoad}" />
<!--<lightning:spinner aura:id="mySpinner" variant="brand" size="medium" class="slds-hide"/>-->
<lightning:spinner variant="brand" size="medium" aura:id="Id_spinner" class="slds-hide" />
<lightning:card>
<aura:set attribute="title">
<div class="slds-text-heading_large slds-text-align_center">
<b>Enquiry</b>
</div>
</aura:set>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input1" label="Name" placeholder="Enter Name..." value="{!v.enquiryName}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;" aura:id="containerCollapsable">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input aura:id="mobile" name="input2" label="Mobile Number" maxlength="10" minlength="10" placeholder="Enter Mobile Number..." value="{!v.mobileNumber}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input aura:id="email" name="input3" label="Email Id" placeholder="Enter Email Id..." value="{!v.emailId}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br/>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input4" label="Company Name" placeholder="Enter Company Name..." value="{!v.companyName}"/>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:select name="typeId" label="Select Type" aura:id="typeId" value="{!v.selectedEnquiry}" required="true">
<option text="---Choose Type---" value="0" />
<aura:iteration items="{!v.typeOfEnquiry}" var="option">
<option text="{!option}" value="{!option}"/>
</aura:iteration>
</lightning:select>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:select name="propertyId" label="Select Property Type" aura:id="propertyId" value="{!v.selectedPropertyType}" required="true">
<option text="---Choose Property Type---" value="0" />
<aura:iteration items="{!v.typeOfProperty}" var="option">
<option text="{!option}" value="{!option}" />
</aura:iteration>
</lightning:select>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br/>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input6" label="Property Area" placeholder="Enter Property Area..." value="{!v.propertyArea}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br/>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input7" label="Country" placeholder="Enter Country..." value="{!v.country}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input8" label="City" placeholder="Enter City..." value="{!v.city}" required="true"/>
<div class="slds-text-color_error" style="background-color:#fff;">
<p>None</p>
</div>
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<br />
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-12">
</div>
<div class="slds-col slds-size_10-of-12">
<lightning:input name="input9" label="Address" placeholder="Enter Address..." value="{!v.address}" />
</div>
<div class="slds-col slds-size_1-of-12">
</div>
</div>
<aura:set attribute="footer">
<div class="slds-text-align_center">
<lightning:button variant="brand" label="Save" title="Brand" onclick="{!c.handleClick}" />
</div>
</aura:set>
</lightning:card>
</aura:component>
({
handleClick : function(component, event, helper) {
// var spinner = component.find("mySpinner");
//component.find("Id_spinner").set("v.class" , 'slds-show');
//$A.util.removeClass(spinner,"slds-hide");
var action = component.get("c.handleClickApex");
if(!helper.checkvalidation(component, event)){
action.setParams({
"enquiryName" : component.get('v.enquiryName'),
"mobileNumber" : component.get('v.mobileNumber'),
"emailId" : component.get('v.emailId'),
"companyName" : component.get("v.companyName") ,
"selectedEnquiry" : component.get("v.selectedEnquiry"),
"selectedPropertyType" : component.get("v.selectedPropertyType"),
"propertyArea" : component.get("v.propertyArea"),
"country" : component.get("v.country"),
"city" : component.get("v.city"),
"address" : component.get("v.address")
});
action.setCallback(this,function(response){
// component.find("Id_spinner").set("v.class",'slds-hide');
if(response.getState() === "SUCCESS") {
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": response.getReturnValue()
});
navEvt.fire();
// $A.util.addClass(spinner,"slds-hide");
}
});
$A.enqueueAction(action);
}
},
onLoad : function(component,event,helper) {
// var spinner = component.find("mySpinner");
// $A.util.removeClass(spinner,"slds-hide");
var enquiryType = $A.get("$Label.c.EnquiryType");
component.set("v.typeOfEnquiry",enquiryType.split(":"));
var propertyType = $A.get("$Label.c.PropertyType");
component.set("v.typeOfProperty",propertyType.split(":"));
// $A.util.addClass(spinner,"slds-hide");
}
})
({
checkvalidation : function(component, event) {
var notBlank = false;
if(!component.get('v.enquiryName')){
notBlank = true;
}
else if(!component.get('v.mobileNumber')){
var mobileValue=component.find("mobile").get("v.value");
if(!mobileValue.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/)) {
}
notBlank = true;
}else if(!component.get('v.emailId')){
var emailValue=component.find("email").get("v.value");
if(!emailValue.match(/^(([^<>()\[\]\\.,;:\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,}))$/)){
}
notBlank = true;
}else if(!component.get("v.selectedEnquiry")){
notBlank = true;
}else if(!component.get("v.selectedPropertyType")){
notBlank = true;
}else if(!component.get("v.propertyArea")){
notBlank = true;
}else if(!component.get("v.country")){
notBlank = true;
}else if(!component.get("v.city")){
notBlank = false;
}
return notBlank;
}
})